Фильтры Bootstrap 4 (расширенные)
Bootstrap 4 Фильтры
Bootstrap не имеет компонента, позволяющего фильтровать. Однако мы можем использовать jQuery для фильтрации/поиска элементов.
Таблицы фильтров
Выполните поиск элементов в таблице без учета регистра:
Пример
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [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()метод для преобразования текста в нижний регистр, что делает поиск нечувствительным к регистру (допускает «john», «John» и даже «JOHN» при поиске).
Списки фильтров
Выполните поиск элементов в списке без учета регистра:
Пример
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Фильтровать что угодно
Выполните нечувствительный к регистру поиск текста внутри элемента div:
Пример
I am a paragraph.
Another paragraph.