Фильтр товаров на JavaScript
В эпоху процветания интернет-магазинов, как никогда востребованы разработчики, способные реализовать запросы владельцев магазинов. Львиная доля заказов на фриланс биржах, как раз приходится на сегмент торговли. На этом уроке мы сделаем фильтр для списка товаров на чистом JavaScript.
Как работает фильтр товаров на JS?
Пользователь не хочет перебирать категории, чтобы добраться до нужного ему товара, а предпочитает воспользоваться поиском. Как только он начинает вводить в форму поиска первую букву нужного товара, то срабатывает фильтр и в списке показываются товары с названиями только на эту букву.
Список товаров на HTML
Создадим поле для ввода товара input и список товаров - тег ul.
<input type="text" id="input" placeholder="Введите продукт.">
<ul id="list">
<li>масло</li>
<li>сметана</li>
<li>творог</li>
<li>кефир</li>
<li>молоко</li>
<li>сыр</li>
<li>ряженка</li>
<li>брынза</li>
</ul>
JavaScript код
Объявим переменную filter и поместим туда функцию.
let filter = function () {
Получим из документа поле для ввода по его идентификатору и поместим в переменную input.
let input = document.getElementById('input');
Повесим на инпут обработчик событие addEventListener, который будет отлавливать нажатие клавиши (событие keyup) в этом поле. После отлова события, запустится callback функция.
input.addEventListener('keyup', function () {
В теле функции пропишем действия, что должно происходить. Положим в переменную filter значение, вводимое пользователем в поле для поиска и приведем его к нижнему регистру. Метод toLowerCase() преобразует текст в нижний регистр, что сделает поиск нечувствительным к регистру (можно искать "кефир", "Кефир" и даже "КЕФИР").
let filter = input.value.toLowerCase(),
Создадим ещё одну переменную filterItems. Найдем все элементы списка list и присвоим этой переменной.
filterItems = document.querySelectorAll('#list li');
Пройдемся по всем элементам в цикле forEach и на каждом из них будем вызывать стрелочную функцию, внутри которой пропишем условие.
filterItems.forEach(item => {
С помощью метода indexOf проверяем, есть ли в строке данные из переменной filter. Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в списке или -1, если такого индекса нет. Если значение у item больше -1, то ничего не скрывается. В противном случае, если у нас -1, то item скрывается через свойство display: none.
if (item.innerHTML.toLowerCase().indexOf(filter) > -1) {
item.style.display = '';
} else {
item.style.display = 'none';
}
})
})
};
Иными словами, мы сопоставляет введенные значения (первые буквы) пользователем с товарами в списке. Все строки не соответствующие поиску скрываются, а все найденные совпадения возвращаются в список.
// Вызываем функцию.
filter();
-
Создано 15.01.2020 10:02:10
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.