jQuery - Filters
jQuery фильтры
Используйте jQuery для фильтрации/поиска конкретных элементов.
Фильтровать таблицы
Выполнение поиска элементов в таблице с учетом регистра:
Пример
Введите что-нибудь в поле ввода для поиска в таблице имен, фамилий или писем:
| Firstname | Lastname | |
|---|---|---|
| John | CSS | [email protected] |
| Mary | CSS | [email protected] |
| July | CSS | [email protected] |
| Anja | CSS | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Пример объяснил: Мы используем jQuery для цикла через каждую строку таблицы, чтобы проверить, если есть какие-либо текстовые значения, которые соответствуют значению поля ввода. toggleметод скрывает строку ( display:none ), которая не соответствует поиску. Мы используем toLowerCase() метод DOM для преобразования текста в нижний регистр, что делает поисковый случай нечувствительным (позволяет "John", "John" и даже "John" в поиске).
Списки фильтров
Выполните поиск элементов в списке с учетом регистра:
Пример
Введите что-нибудь в поле ввода для поиска элементов в списке:
- First item
- Second item
- Third item
- Fourth
Фильтровать все
Выполните поиск текста внутри элемента div с учетом регистра:
Пример
I am a paragraph.
Another paragraph.
