主页 / 问题 / 1159007
Accepted
JuniorDjango
Asked:2020-07-30 14:17:35 +0000 UTC2020-07-30 14:17:35 +0000 UTC

javascript中的实时过滤器

  • 772

请帮忙，我无法过滤，如果我在输入中输入比萨饼，那么只有所有比萨饼应该出现，其余的应该消失，或者我写 'ai' 然后所有带有字母 ai 的数组都应该出现，其余的应该消失，请帮忙，谢谢

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)
                        }
                    }
                })
javascript

2 个回答

  1. Best Answer

    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" />

    • 4 

  2. <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>

    • 2

相关问题