Здесь вы узнаете, как отфильтровать список при помощи JavaScript.
Фильтрация списка
Как при помощи JavaScript искать заданные данные в списке.
Попробовать самому »Как создать поиск по списку
Шаг 1) Добавляем HTML:
Пример
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск имени..">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
Примечание: В данном примере мы используем
href="#"
, так как у нас ссылки никуда не ведут. В реальной жизни здесь должны быть URL на конкретную страницу.
Шаг 2) Добавляем CSS:
Создаем стили элемента ввода и списка:
Пример
#myInput {
background-image: url('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:
Пример
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";
}
}
}
Попробовать самому »Совет: Если вы хотите, чтобы поиск был регистрозависимым, в коде JavaScript следует убрать вызов метода
toUpperCase()
.