Блог

Главная - Вопросы по программированию - Как создать список фильтров с помощью JavaScript

Как создать список фильтров с помощью JavaScript

#javascript #jquery

Вопрос:

Как составить список фильтров, которые отвечают типу пользователя. Например, это список данных из базы данных.

 <input type="search" class="search" name="search">
<ul class="find">
 <li>Bird</li>
 <li>Cabbage</li>
 <li>Cat</li>
 <li>Dog</li>
 <li>Eagle</li>
 <li>Egg</li>
 <li>Frog</li>
 <li>Fist</li>
</ul>

У меня нет кода JavaScript или jQuery, который можно было бы показать, потому что я не знаю, как это сделать.
Что я хочу, когда пользователь вводит первую букву в поле поиска, она будет фильтроваться по списку. Например, пользователь вводит первую букву в поле поиска буква B.Он должен отфильтровать весь список, начинающийся с буквы B, и не имеет значения, большая или маленькая введенная буква.
Есть ли кто-нибудь, кто может мне в этом помочь?
Спасибо.

Комментарии:

1. Существует ли модель, которая представляет животных — или вы собираетесь выполнять поиск по DOM? т. Е. Как заполняется список?

2. Я просто хочу отфильтровать весь список, соответствующий типу пользователя в поле поиска. Точно так же, как в моих примерах выше.

3. Тогда я думаю, что @Spectric ответил на ваш вопрос.

Ответ №1:

Добавьте input во входные данные прослушиватель событий, который скрывает все li элементы, значение которых textContent не включает входные данные:

 const items = document.querySelectorAll('.find li');

search.addEventListener('input', function(){
  let val = search.value.toLowerCase();
  items.forEach(e => e.style.display = e.textContent.toLowerCase().includes(val) ? 'block' : 'none')
}) 
 <input type="search" class="search" name="search" id="search">
<ul class="find">
 <li>Bird</li>
 <li>Cabbage</li>
 <li>Cat</li>
 <li>Dog</li>
 <li>Eagle</li>
 <li>Egg</li>
 <li>Frog</li>
 <li>Fist</li>
</ul>

Комментарии:

1. Используйте startsWith(val) вместо includes(val) , если вы ожидаете, что пользователь введет начало слова.

2. Иван Беляков спасибо за информацию. Spectric спасибо за код

Ответ №2:

Вы можете использовать datalist .

Элемент HTML содержит набор элементов, которые представляют допустимые или рекомендуемые параметры, доступные для выбора в других элементах управления.

 <input list="animals" type="search" class="search" name="search">
<datalist class="find" id="animals">
 <option>Bird</option>
 <option>Cabbage</option>
 <option>Cat</option>
 <option>Dog</option>
 <option>Eagle</option>
 <option>Egg</option>
 <option>Frog</option>
 <option>Fist</option>
</datalist>

Ответ №3:

Вы можете использовать простой forEach цикл:

 var items = document.querySelectorAll('.find li');
document.querySelector('[name=search]').addEventListener('input', function() {
  items.forEach(function(item) {
    item.style.display = item.innerText.toLowerCase().indexOf(this.value.toLowerCase()) > -1 ? 'block' : 'none';
  }.bind(this));
}); 
 <input type="search" class="search" name="search">
<ul class="find">
  <li>Bird</li>
  <li>Cabbage</li>
  <li>Cat</li>
  <li>Dog</li>
  <li>Eagle</li>
  <li>Egg</li>
  <li>Frog</li>
  <li>Fist</li>
</ul>

Ответ №4:

Вы можете использовать StartsWith, чтобы проверить li , начинается ли текстовое содержимое с введенного текста или нет

 const input = document.querySelector("input");
const list = document.querySelectorAll("ul > li");

function showData(inputText) {
  list.forEach(el => {
    const text = el.textContent.toLowerCase();
    if (text.startsWith(inputText.toLowerCase())) el.style.display = "block";
    else el.style.display = "none";
  })
}

input.addEventListener("input", e => {
  showData(e.target.value)
}) 
 <input type="search" class="search" name="search">
<ul class="find">
  <li>Bird</li>
  <li>Cabbage</li>
  <li>Cat</li>
  <li>Dog</li>
  <li>Eagle</li>
  <li>Egg</li>
  <li>Frog</li>
  <li>Fist</li>
</ul>
Метки: