Узнать, как создать фильтр поиска элементов в выпадающем списке используя HTML, CSS и JavaScript.
Фильтр поиска выпадающего списка
Попробуйте сами »Создание кликабельного выпадающего списка
Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.
Шаг 1) Добавить HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Выпадающий</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">О Нас</a>
<a href="#base">Основа</a>
<a href="#blog">Блог</a>
<a href="#contact">Контакт</a>
<a href="#custom">Заказ</a>
<a href="#support">Поддержка</a>
<a href="#tools">Инструменты</a>
</div>
</div>
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>,<a> или <p>.
Используйте элемент контейнера (например, <div>), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
/* Кнопка выпадающего списка */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* Поле поиска */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* Поле поиска, когда он получает фокус/нажал на */
#myInput:focus {outline: 3px solid #ddd;}
/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
position: relative;
display: inline-block;
}
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Ссылки внутри выпадающего списка */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс в .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {display:block;}
Объяснение примера
Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т. д.
Класс .dropdown использует position:relative, что необходимо когда мы хотим
выпадающее содержимое будет размещено прямо под кнопкой выпадающего списка (с помощью position:absolute).
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание min-width установлено значение 230px. Не стесняйтесь изменить это. Совет: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto чтобы включить прокрутку на небольших экранах).
Поле поиска (#myInput) стилизовано под выпадающее меню. Мы добавили значок поиска, который помещается слева внутри поля поиска, чтобы указать, что это на самом деле поле поиска.
Шаг 3) Добавить JavaScript:
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
Попробуйте сами »
Совет: Зайдите на наш учебник CSS Выпадающий список to learn more about dropdowns.
Совет: Зайдите на наш Как сделать - Выпадающий список при наведении чтобы узнать больше о раскрывающихся списках при наведении