Реализация живого поиска

113

09 ноября 2019, 02:50

есть список и форма ввода(код приложил ниже):

function someFunc() { 
  var noh = document.getElementById("search").value; 
  spsk = document.getElementById(listr); 
  spsk.style.display = 'none' 
} 
document.getElementById("btn").onclick = someFunc;

.list li:nth-child { 
  display: none; 
} 
 
input[type=button] { 
  width: 120px; 
  height: 25px; 
}

<input type="text" class="srch" id="search" onchange=""> <input type="button" id="btn" value="сортировать"> 
<ol class="list" id="listr"> 
  <li>Саратов</li> 
  <li>Новгород</li> 
  <li>Москва</li> 
  <li>Санкт-Петербург</li> 
</ol>

Задача стоит следующая: Имеется список в HTML, любой, маркированный или упорядоченный, при вводе символа(или части ключевого слова) необходимо удалить части списка, которые не относятся к ним, то есть если имея список приложенный в коде написать в строку ввода "м", то останется только Москва, а все остальные части списка нужно удалить, а если же строка ввода будет очищена, список вернётся в исходное положение.

Вопросы следующие: 1. Как обрабатывать строку ввода и что в этом может помочь? То есть, если я ввожу и у меня в режиме реального времени удаляется часть списка, значит моё значение должно где-то временно храниться(я и пытался его хранить, что видно по коду JS), а потом каким-то образом взаимодействовать со списком, если это так, то каким образом я могу убрать часть списка при вводе определённого символа(через что это реализуется и каким конкретно образом)? Если же значение вводимое в строку нет необходимости сохранять, то каким образом ещё можно реализовать действие "при изменении сделать"?

Прошу помощи в решении данной задачи, потому как интернет внятных ответов не даёт, но утверждается что это задача "на 10-30 минут", на что я уже убил более двух часов. Заранее спасибо.

Answer 1

Надеюсь то, что Вам нужно.

document.querySelector("input[type=\"text\"]").addEventListener("input", (e) => { 
  [...document.querySelectorAll("ul li")].forEach(item => { 
    if (item.textContent.toLowerCase().includes(e.target.value.toLowerCase())) { 
      item.style.display = "block"; 
    } else { 
      item.style.display = "none"; 
    } 
  }); 
});

<input type="text"> 
<ul> 
  <li>Москва</li> 
  <li>Санкт-Петербург</li> 
  <li>Киев</li> 
  <li>Волгоград</li> 
  <li>Челябинск</li> 
  <li>Чебоксары</li> 
</ul>