Как сделать - Фильтр/поиска списка
Узнать, как создать фильтр списка с помощью JavaScript.
Фильтр списка
Как использовать JavaScript для поиска элементов в списке.
Создание списка поиска
Шаг 1) Добавить HTML:
Пример
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск имен..">
<ul id="myUL">
<li><a href="#">Андрей</a></li>
<li><a href="#">Алексей</a></li>
<li><a href="#">Борис</a></li>
<li><a href="#">Владимир</a></li>
<li><a href="#">Сергей</a></li>
<li><a href="#">Кристина</a></li>
<li><a href="#">Татьяна</a></li>
</ul>
Примечание: Мы используем href="#" в этой демонстрации, так как у нас нет страницы, чтобы связать его. В реальной жизни это должен быть реальный URL-адрес конкретной страницы.
Шаг 2) Добавить CSS:
Стиль входного элемента и списка:
Пример
#myInput {
background-image: url('/css/searchicon.png'); /* Добавить значок поиска для ввода */
background-position: 10px 12px; /* Расположите значок поиска */
background-repeat: no-repeat; /* Не повторяйте изображение значка */
width: 100%; /* Полная ширина */
font-size: 16px; /* Увеличить размер шрифта */
padding: 12px 20px 12px 40px; /* Добавить немного отступов */
border: 1px solid #ddd; /* Добавить серую границу */
margin-bottom: 12px; /* Добавить некоторое пространство под входом */
}
#myUL {
/* Удалить стиль списка по умолчанию */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Добавить границу для всех ссылок */
margin-top: -1px; /* Предотвращение двойных границ */
background-color: #f6f6f6; /* Серый цвет фона */
padding: 12px; /* Добавить немного отступов */
text-decoration: none; /* Удалить подчеркивание текста по умолчанию */
font-size: 18px; /* Увеличьте размер шрифта */
color: black; /* Добавить черный цвет текста */
display: block; /* Сделайте его в элемент блока, чтобы заполнить весь список */
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Добавить эффект наведения на все ссылки, кроме заголовков */
}
Шаг 3) Добавить JavaScript:
Пример
<script>
function myFunction() {
// Объявлять переменные
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Выполните цикл по всем элементам списка и скройте те, которые не соответствуют запросу поиска
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
Редактор кода »
Совет: Удалить toUpperCase() если вы хотите выполнить поиск с учетом регистра.
Совет:Кроме того, проверить Фильтр таблицы.
