How to make filter list using JavaScript-CodePudding

How to make filter list which respond on user type. For example this is the list of data from the database.

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

I don't have any JavaScript or jQuery code to show because I don't know how to do it. What I want when a user type the first letter in the search box it will filter on the list. For example user type the first letter in the search box letter B it should filter all the list that start with letter B and it doesn't matter if the letter typed is big or small. Is there anyone who can help me with this? Thank you.

CodePudding user response：

Add an input event listener to the input which hides all li elements whose textContent doesn't include the input's value:

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>

CodePudding user response：

You can use datalist.

The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.

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

CodePudding user response：

You can use a simple forEach loop:

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>

CodePudding user response：

You can use startsWith to check wheather the textContent of li starts with the input text or not

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>