Поиск среди элементов по буквам на чистом javascript
Привожу пример самого обычного и легкого как мне кажется поисковика по буквам среди элементов в блоке
Поиск среди элементов по буквам на чистом javascript
Привожу пример самого обычного и легкого как мне кажется поисковика по буквам среди элементов в блоке
📅 22 апреля 2023
👁🗨 378
В одном из проектов потребовался поисковик по введённым буквам среди элементов для более точной фильтрации других элементов. На скорую руку реализовал данный функционал. Как по мне, достаточно легкий, понятный и простой в использовании.
<div class="search-input">
<input type="text" id="search" placeholder="Введите запрос">
<svg onclick="search()" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="34" height="34" fill="#191917"></rect>
<g clip-path="url(#clip0_1857_15680)">
<path d="M24.6998 23.6964L21.2999 20.2912M23.184 15.7404C23.184 17.4485 22.5053 19.0867 21.2972 20.2945C20.089 21.5024 18.4505 22.1809 16.7419 22.1809C15.0334 22.1809 13.3948 21.5024 12.1867 20.2945C10.9785 19.0867 10.2998 17.4485 10.2998 15.7404C10.2998 14.0322 10.9785 12.394 12.1867 11.1862C13.3948 9.97836 15.0334 9.2998 16.7419 9.2998C18.4505 9.2998 20.089 9.97836 21.2972 11.1862C22.5053 12.394 23.184 14.0322 23.184 15.7404V15.7404Z" stroke="#F0EEEE" stroke-width="1.3" stroke-linecap="round"></path>
</g>
<defs>
<clipPath id="clip0_1857_15680">
<rect width="16" height="16" fill="white" transform="translate(9.5 8.5)"></rect>
</clipPath>
</defs>
</svg>
</div>
<div class="search-list">
<div class="search-item">
<div class="target">Versace</div>
</div>
<div class="search-item">
<div class="target">Gucci</div>
</div>
<div class="search-item">
<div class="target">Prada</div>
</div>
<div class="search-item">
<div class="target">Louis Vuitton</div>
</div>
<div class="search-item">
<div class="target">Balenciaga</div>
</div>
</div>function search() { // Объявляем функцию
let input = document.getElementById('search'), // Находим элемент с id="search" и присваиваем переменной input
filter = input.value.toLowerCase(), // Получаем введённые данные из input с приведением к нижнему регистру и присваиваем переменной filter
nodes = document.getElementsByClassName('target'); // Находим все элементы на странице с классами target
for (i = 0; i < nodes.length; i++) { // Проходимся циклом по всем полученным элементам с классами target
if (nodes[i].innerText.toLowerCase().includes(filter)) { // Если в начале содержимого какого-то элемента с классом target в нижнем регистре находится то, что в переменной input
nodes[i].parentNode.style.display = "flex"; // Родителям этих элементов добавляем стиль display="flex"
} else { // Иначе
nodes[i].parentNode.style.display = "none"; // Родителям остальных элементов добавляем стиль display="none"
}
}
}