В этой статье мы разберём как сделать на JavaScript поиск на странице или если точнее по списку, будет крайне полезная и интересная статья.
Также рекомендую прочитать «Прогноз погоды на JavaScript», тоже крайне интересная и полезная статья.
Как создать поиск на JavaScript:
Для начала, перед созданием нам нужно сделать не большой HTML блок со списком, это делается всё очень просто, вот:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <input type="text" id="inputSearch" placeholder="Search.." title="Type in a category"> <ul id="list"> <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> |
Здесь всё просто, мы просто создали не большой список, в котором храним ссылке, но это для примера.
Теперь перейдём самому главному, это самому поиску, для этого нам понадобится создать одну функцию, которая как раз и будет выполнять поиск, вот она:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function search() { let input = document.getElementById("inputSearch"); let filter = input.value.toUpperCase(); let ul = document.getElementById("list"); let li = ul.getElementsByTagName("li"); // Перебирайте все элементы списка и скрывайте те, которые не соответствуют поисковому запросу for (let i = 0; i < li.length; i++) { let a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } |
В начале функции мы объявляем различного рода переменные, сначала берём наш input, потом создаём новую переменную присваиваем ей значение поля, но предварительно всю строку переводим в большой регистр, это нам пригодиться для сравнения.
Последнее берём ul и остальные элементы списка, который есть внутри него, проходимся по ним циклом, берём элемент a и сравниваем его, с переменной filter предварительно переводя высший регистр, всё это нужно, чтобы строки правильно сравнились, а при сравнение строк также учитывается и их регистр.
Если мы находим совпадение в строке ссылки, то тогда выставляем настройки display, пустую строку, иначе none, таким образом и работает поиск на JS.
Последние что нам осталось, это отследить, это событие нажатия клавиш, для этого вписываем такой код:
1 | document.addEventListener('keyup', search); |
Таким образом мы будим следить на нажатие клавиш, и если в поле что-то изменилось, то применять это.
Вот что получилось:
Как можете заметить всё работает.
Вывод:
В этой статье вы прочитали, как сделать на JavaScript поиск на странице или по списку, и в целом тут не чего сложного нет, надо просто создать одну функцию.
Кусок кода был взят с сайта по этой ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...