jQuery - Пример поиска на странице

В следующих примерах будет показано как можно при помощи jQuery отфильтровывать/искать заданные элементы на странице.

Пример #1 - Поиск в таблице

Выполним регистронезависимый поиск данных в таблице:

Введите что-нибудь в поле ввода для поиска по имени, фамилии или email:



Имя Фамилия Email
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

jQuery:


$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var  value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Объяснение примера: При помощи jQuery мы обходим каждую строку таблицы, чтобы проверить, содержит ли она текстовое значение, совпадающее со значением в поле ввода. Метод toggle() скрывает те строки (display:none), которые не соответствуют поиску. При этом, при помощи DOM метода toLowerCase() мы преобразуем текст в нижний регистр, что делает поиск регистронезависимым (можно ввести "john", "John" или "JOHN").

Пример #2 - Поиск по списку

Выполним регистронезависимый поиск данных в HTML списке:

Введите что-нибудь в поле ввода для поиска по списку:



  • First item
  • Second item
  • Third item
  • Fourth

Пример #3 - Поиск любого элемента

Выполним регистронезависимый поиск данных в элементах div:



I am a paragraph.

I am a div element inside div.

Another paragraph.