Как сделать - Меню поиска
Узнать, как создать меню поиска для фильтрации ссылок с помощью JavaScript.
Меню поиск/фильтр
Как искать ссылки в меню навигации:
Содержимое страницы
Начните вводить определенную категорию/ссылку в строке поиска, чтобы "фильтровать" параметры поиска.
Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..
Some other text..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..Некоторый текст..
Некоторый текст..
Создание меню поиска
Шаг 1) Добавить HTML:
Пример
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Поиск.." title="Введите категорию">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
Примечание: Мы используем href="#" в этой демонстрации, так как у нас нет страницы, чтобы связать его. В реальной жизни это должен быть реальный URL к определенной странице.
Шаг 2) Добавить CSS:
Стиль окна поиска и меню навигации:
Пример
/* Стиль окна поиска */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Стиль меню навигации */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Стиль навигационных ссылок */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
Шаг 3) Добавить JavaScript:
Пример
<script>
function myFunction() {
// Объявлять переменные
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// Выполните цикл по всем элементам списка и скройте те, которые не соответствуют запросу поиска
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
Редактор кода »
Совет: Удалять toUpperCase() если вы хотите выполнить поиск с учетом регистра.
Совет: Кроме того, проверить Как сделать фильтр табуляции.
Совет: Кроме того, проверить Как сделать фильтр списка.