How to make filter list using JavaScript

Question

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.

Is there a model that represents the animals - or are you intending to search through the DOM? i.e. How is the list being populated? — luxdvie
– luxdvie, Commented Oct 9, 2021 at 15:56
I just want to filter all list that match on the user type in the search box. Just like my examples above. — Aldrin Atolle
– Aldrin Atolle, Commented Oct 9, 2021 at 16:01

Spectric · Accepted Answer · 2021-10-09 15:58:57Z

1

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>

answered Oct 9, 2021 at 15:58

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan Beliakov Over a year ago

Use startsWith(val) instead of includes(val) if you expect the user to type the beginning of the word.

Aldrin Atolle Over a year ago

Ivan Beliakov thanks for the info. Spectric thanks for the code

Hassan Imam · Accepted Answer · 2021-10-09 16:03:14Z

1

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>

answered Oct 9, 2021 at 16:03

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

DecPK · Accepted Answer · 2021-10-09 16:07:30Z

1

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>

answered Oct 9, 2021 at 16:07

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

Đinh Carabus · Accepted Answer · 2021-10-09 16:01:16Z

0

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>

answered Oct 9, 2021 at 16:01

Đinh Carabus

3,5054 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to make filter list using JavaScript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related