Меню

Живой поиск jquery для таблицы



Живой поиск jQuery

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek.

Плагин очень прост в использовании, но в то же время имеет много настроек. HideSeek совместим с IE7+, Chrome, Firefox, Safari, jQuery 1.8.x, 1.9.x, 1.11.x, 1.12.x, 2.1.x, 2.2.x и поддерживает подсветку текста, настраиваемые сообщения, навигацию, инициализацию через data-атрибут, настраиваемые события и многое другое. Неплохо, неправда ли?

Где это может пригодится? Ну к примеру для страницы с структурой компании и контактами сотрудников. Если сотрудников много, то будет логично сделать поиск по фамилии или должности. Так вот с помощью плагина HideSeek вы создадите такой поиск за считанные минуты.

Давайте рассмотрим по шагам как подключить и использовать плагин.

Шаг 1. Скачиваем плагин

Скачать плагин можно на официальном сайте . Там же вы можете найти примеры его использования и документацию.

Шаг 2. Подключаем jQuery и HideSeek на страницу

Разархивируем ранее скачанные файлы плагина и подключаем их на страницы сайта:

Настройка плагина HideSeek

Как видите использовать плагин очень просто. Давайте рассмотрим его некоторые настройки, которые могут пригодится.

Подсветка текста

Текст сообщения, если нет результатов

Исключить элементы из поиска

Скрывать элементы по умолчанию

Событие после поиска

Пример на Bootstrap

Давайте теперь попробуем воплотить в жизнь тот пример со страницей контактов, о котором я писал в начале статьи.

Создадим страницу на начальном шаблоне Bootstrap. Представим, что это будут карточки с именем сотрудника, его фото и контактами. А над карточками будет поле ввода поискового запроса.

У меня получилось примерно следующее:

Контакты сотрудников компании на Bootstrap

Исходный код страницы:

А вот результат работы плагина HideSeek:

Как вы можете видеть, плагин отфильтровал запись по имени сотрудника, и подсветил найденную часть текста.

Заключение

Думаю jQuery плагин HideSeek найдет свое место в вашем арсенале JavaScript инструментов, а это руководство надеюсь поможет вам создать простой и функциональный живой поиск на jQuery. Всем спасибо и удачи!

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

Читайте также:  Таблица нумизмата монеты россии

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы. HTML-код формы Добавляем в форму ещё одно поле файл:

Источник

jqGrid — Динамические таблицы на jQuery. Сложный Поиск

Введение

На мой взгляд, jqGrid — самый успешный и удобный на данный момент плагин для jQuery, работающий с таблицами БД через AJAX запросы и PHP (Так же существует версия для ASP.NET).

Все подробности в данной статье я опущу, акцентируя ваше внимание лишь на вопросе, как сделать сложный поиск по таблице, используя этот плагин.

Для начала советую познакомиться:

  • с самим плагином вот тут;
  • с примерами его работы вот здесь;
  • со статьей «Введение в jqGrid», в которой описано как связать jqGrid + php + Mysql (или иные БД).

Как получить данные БЕЗ условия «where» в этой статье описываться не будет. Предполагается, что вы прочли статью «Введение в jqGrid» и хотите теперь не просто сортировать результаты и разбивать их на страницы, а делать сложные поиски сразу по нескольким полям таблицы.

Прошу обратить особое внимание на пример, расположенный по ссылке выше, под названием «Searching (4.0) new» -> «Show query in search ».

И так, мы создали документ HTML:

Подключили JavaScript код:

Подключили необходимые стили и скрипты (скачать можно тут):

Обратите внимание, что я не подключаю библиотеку одним файлом или отдельными частями, как это можно было сделать, а использую файл «grid.loader.js», который также поставляется с исходниками на оффициальном сайте плагина. Я его немного изменил и привожу измененный отрывок кода:

Используя этот файл удобно управлять компонентами этого модуля, а также выбирать его язык.

Расширенный поиск

Форма расширенного поиска:
Форма расширенного поиск

Теперь самое сладкое. Что же нам передает jqGrid при поиске?
POST или GET параметры (в зависимости от настроек jqGrid):

  1. $_REQUEST[‘_search‘] — Булево значение, если запрос с условием поиска оно принимает истинное значение;
  2. $_REQUEST[‘filters‘] — Объект с условиями в представлении json;
  3. $_REQUEST[‘searchField‘] — Имя поля для поиска (если условие простое);
  4. $_REQUEST[‘searchOper‘] — Операция сравнения поля для поиска (если условие простое);
  5. $_REQUEST[‘searchString‘] — Значение поля для поиска (если условие простое);

Теперь зная эти данные, необходимо сгенерировать строку условий «where» и передать ее необходимой процедуре, которая раннее принимала только имя сортируемой колонки, направление сортировки, номер страницы и количество записей на одну страницу (для пагинации).

Вот код, который необходимо вставить перед запросом в БД (в примере используется POST-запрос):

Вот «сердце» данной статьи, функции генерации условия для поиска в БД.

Функция generateSearchString():

Рекурсивная функция generateSearchStringFromObj() генерации условий для выборки из БД:

Форма inline-поиска:
Форма inline-поиска

ВНИМАНИЕ: данная формула не будет работать при inline-поиске. При inline-поиске jqGrid будет передавать в параметрах запроса имена колонок и их значения.

Читайте также:  Способы выражения составного именного сказуемого таблица с примерами

Таким образом для реализации inline-поиска по `id` достаточно написать такой код:

Для поиска по нескольким полям к условию соответственно будут добавляться дополнительные строки, соединенные между собой «AND». Естественно вместо равенства можно использовать любой условие, позволительное для вашей БД.

Исходник файла-обработчика запросов AJAX от jqGrid. (Внимательно читайте комментарии, скрипт будет работать, только если вы настроете подключение к БД и впишите вместо моего обращение к модулю свой запроса к БД).

Источник

Живой поиск по строкам таблицы

Я хочу сделать живой поиск по строкам таблицы, используя jQuery,» живое » слово является ключом, потому что я хочу ввести ключевые слова в текстовом вводе на том же сайте, и я хотел бы, чтобы jQuery автоматически сортировал (или удалял тех, кто не соответствует поисковому запросу) строки таблицы.

и если бы я fe. поиск Unique ID , он должен показывать только строки, которые начинаются с определенного числа для уникального идентификатора. Железо. если я тип ‘2’ в поле ввода поиска, следующие строки должны остаться, так как они начинаются с 2 :

если бы я типа 24 , тогда должна быть только одна строка, видимая, поскольку она начинается с 24 :

если бы вы, ребята, могли дать мне несколько советов о том, как сделать что-то подобное, я был бы очень признателен.

12 ответов

Я не уверен, насколько это эффективно, но это работает:

демо — Живой поиск на столе

Я добавил некоторую упрощенную логику подсветки, которую вы или будущие пользователи могли бы найти удобной.

один из способов добавить некоторые основные выделения, чтобы обернуть em теги вокруг сопоставленного текста и использование CSS применяют желтый фон к сопоставленному тексту i.e: ( em < background-color: yellow >), похожими на это:

демо — применение простой подсветки

вот версия, которая ищет оба столбца.

Я взял ответ yckart и:

  • разнес его для удобства чтения
  • поиск без учета регистра
  • в сравнении была ошибка, которая была исправлена путем добавления .trim ()

(Если вы поместите свои скрипты в нижней части страницы ниже jQuery include, вам не понадобится готовый документ)

Если вы хотите расширить это, сделайте итерацию над каждым » td » и выполните это сравнение.

вот чистая версия Javascript с LIVE search для всех столбцов :

С помощью yckart это, Я сделал это, чтобы искать всю таблицу-все td.

Если какая-либо ячейка в строке содержит искомую фразу или слово, эта функция показывает, что строка иначе скрывает ее.

я использовал предыдущие ответы и объединил их для создания:

поиск любых столбцов скрытие строк и подсветка

CSS для выделения найденных текстов:

демо здесь

вот что вы можете сделать с Ajax, PHP и JQuery. Надеюсь, это поможет или даст вам старт. Проверьте запрос mysql в php. Он соответствует шаблону, начиная с первого.

посмотреть демо и исходный код здесь.

создать поле поиска, может быть поле ввода, как это.

теперь нам нужно слушать все, что пользователь вводит в текстовое поле. Для это мы будем использовать jQuery live () и событие keyup. На каждом keyup у нас есть функция jquery «поиск», которая будет запускать PHP-скрипт.

Читайте также:  Самые крупные города россии таблица

предположим, что у нас есть html, как это. У нас есть поле ввода и список для отображения результатов.

у нас есть скрипт Jquery, который будет прослушивать событие keyup в поле ввода, и если он не пуст, он вызовет функцию search (). Функция search() запустит PHP-скрипт и отобразит результат на той же странице использование AJAX.

>); В php выполните запрос к базе данных mysql. Php вернет результаты, которые будут помещены в html с помощью AJAX. Здесь результат помещается в список html.

предположим, что существует фиктивная база данных, содержащая две таблицы animals и bird с двумя похожими именами столбцов «type» и «desc».

старый вопрос, но я узнаю, как это сделать быстрее. Для моего примера: у меня есть данные 10k в моей таблице, поэтому мне нужна быстрая поисковая машина.

вот что я сделал:

надеюсь, это кому-то поможет.

ниже функции JS вы можете использовать для фильтрации строки на основе некоторых указанных столбцов см. массив searchColumn. Он взят из школы w3 и немного настроен для поиска и фильтрации по заданному списку столбцов.

Источник

Живой поиск jQuery

Давайте-ка посмотрим на этот пример работы:

Слоновые Elephants семейство млекопитающих отряда хоботных. В настоящее время к этому семейству относятся наиболее крупные наземные млекопитающие. Китообразные Сetaceans (лат. Cetacea, в обиходе все китообразные, кроме дельфинов и морских свиней называются киты) — отряд млекопитающих. Свиньи Pigs семейство нежвачных парнокопытных (Artiodactyla), включающее 8 видов, в том числе единственного европейского представителя семейства

Рассмотрим код по порядку.

Допустим у нас есть определенная структура блоков. Например, как здесь:

И есть некая базовая стилизация:

Каким образом нам нужно заставить работать input, чтобы скрывались и показывались нужные блоки в любой блочной или табличной структуре.

Весь пример проделывается на jQuery.

Для начала, нам нужно зафиксировать событие jQuery. Это ввод с клавиатуры в текстовое поле, имеющее какой-либо селектор. В моем случае — .js-search-block

Как только происходит событие ввода с клавиатуры, мы записываем все введенные данные в перменную, которую будем искать в определенных местах блоков.

А вот далее самое интересное, нам нужно пройтись по всем блокам, чтобы поискать в каждом из них нужное нам значение

Записываем объект текущей строки в переменную

Собираем также нужные нам значения блоков в переменные

А далее просто сравниваем каждое из них с нашей переменной, что вводили в текстовое поле. Если часть текста, независимо от регистра и расположения, будет найдена в строке, то проводим определенные события.

где — reg — объект регулярного выражения, на основе введенного нашего запроса.

animal_name.match и animaL_eng_name.match — это поиск нашей подстроки в полноценных строках: название животного и английское название животного. Если хотябы одно из них справедливо, то блок оставляем

$row.fadeIn(«slow»); и $row.fadeOut(«slow»); — медленное появление и потухание блоков. Сделано для более приятно визуализации.

В принципе разбор кода закончен. Если есть вопросы или дополнения, с радостью пообщаюсь с Вами.

Источник

Adblock
detector