Filter Search elements by using HTML, CSS and JavaScript

By Shuvranil Mondal

Item filtration is the most common and important feature in every static and dynamic website. There are many ways to implement this feature In your project.

STEPS :

1: You have to structure your HTML code proper way. In HTML code there is a unorder list (ul) and gave it by id name 'box-items'. And inside our unorder list there is a list (li) and gave it to class name 'box'.In this way we can pass multiple 'li' inside our unorder list but ID name must be unique and classname must be same.

2: You need to give a id name to input which type is 'search'.User can input their search item into the search bar and we can get that value by the help of ID name.

3: Now there are many techniques and approaches but i do it very simple and affective so that everyone can understand and follow the code bellow.

let box = document.getElementById('box-items')
let search = document.getElementById('se-area')
let li = box.getElementsByTagName('li')

let filter =()=>{
    let item = search.value
    for(i=0;i< li.length;i++){
        let h2 = li[i].getElementsByTagName('h2')[0]
        if(h2.innerHTML.toLowerCase().indexOf(item.toLowerCase()) > -1){
            li[i].style.display = ''
        }else{
            li[i].style.display = 'none'
        }
    }
}
search.addEventListener('keyup',()=>{
    filter()
})