Простой поиск с помощью JavaScript

Простая операция поиска с использованием JavaScript для фильтрации элементов из списка.

Таким образом, у нас есть окно поиска и неупорядоченный список с 0 детьми.

search

• Добавить элементы в список, используя манипуляции с DOM

var list= ["banana" , "strawberry" , "orange" , "apple"]

var listEle = document.getElementById("list");

insertListItems = (tempList) => {
   listEle.innerHTML = "";
   tempList.map((i)=>{
      var liEle = document.createElement("LI");
      var liText = document.createTextNode(i);          
      liEle.appendChild(liText);  
      listEle.appendChild(liEle);
   })
}

insertListItems(list);

Теперь добавьте событие Onkeyup в Textarea, чтобы вызвать функцию поиска при введении любого значения в Textarea

Функция принимает значение поиска в качестве параметра и проверяет, если значение поиска не является пустым, если она пуста, она просто использует те же данные, в противном случае, используя метод фильтра, мы можем соответствующим образом отфильтровать значения

ПРИМЕЧАНИЕ. Используется метод Touppercase, чтобы результаты поиска не были чувствительны к случаям.

search = (searchTerm) => {
  searchTerm = searchTerm.toUpperCase()
  var temp = list;
  if(searchTerm != ""){
      listEle.innerHTML = "";
      temp = list.filter((i)=>{
        i = i.toUpperCase()
        if( i.indexOf(searchTerm) != -1){
           return i
        }})
    }
     insertListItems(temp)
}

Ссылка для справки:- https://codepen.io/harshita-nahta/pen/nwvrywb

Счастливого развития!

Оригинал: “https://dev.to/harshitanahta/simple-search-box-using-javascript-ak6”