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