Живой фильтр на javascript

Question

Прошу помочь, не получается фильтровать, если в инпут введу пиццу, то должны появится только все пиццы, а остальные должны исчезнуть, или напишу 'ай' то все массивы которые имеют буквы ай должны появится а остальные исчезнуть, прошу помочь, СПАСИБО

html

<div class="foods">Пицца Маргарита</div>
<div class="foods">Пицца Четыре Сыра</div>
<div class="foods">Пицца Монако</div>
<div class="foods">Чай черный</div>
<div class="foods">Чай зеленный</div>
<div class="foods">Суп харчо</div>
<div class="foods">Суп мастава</div>

js

let search = document.getElementById('search')
let foods = document.querySelectorAll('.foods')
search.addEventListener('input', function(){
   if (this.value != '') {
                        if (foods.includes(this.value)) {
                            console.log('sdf')
                        }
                    }
                    else {
                        for(let i = 0; i < foods.length; i++){
                            console.log(foods[i].value)
                        }
                    }
                })

Answer 1

<form>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

Answer 2

Array.indexOf вам в помощь

let search = document.getElementById('search')
let foods = ['Фанта', 'Пепси', 'Круассан', 'Пицца Маргарита', 'Пицца Четыре сыра', 'Пицца Читос', 'Чай зеленный', 'Чай черный'];

// 1. создаем элементы
const createElements = function(arr) {
  return arr.map(function(value) {
    const element = document.createElement("div")
    element.classList.add('foods')
    element.innerHTML = value
    document.body.insertBefore(element, search)
    return element;
  });
}
const allElements = createElements(foods)


// 2. устанавливаем обработчик на поле ввода
search.addEventListener('input', function() {
  parseElements(this.value)
})

// 3. функция поиска по элементам
const parseElements = function(text) {
  return allElements.forEach(function(element) {
    if ((element.innerText.toLowerCase() + "").indexOf(text.toLowerCase()) != -1) {
      element.classList.remove('hide')
    } else {
      element.classList.add('hide')
    }
    return element
  });
}

.hide {
  display: none;
}

<input id="search" type="text" />

БЛОГ НА HUSL

Живой фильтр на javascript

Ответы (2 шт):