Coders Packet

Filter Search elements 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.

Follow the steps below:

1: You have to structure your HTML code proper way. There is an unordered list (ul) in HTML code 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 the ID name must be unique and the class name must be the same.

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

3: Now there are many techniques and approaches but I do it very simple and effective so that everyone can understand and follow the code below.

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()
})

 

ctive so that everyone can understand and follow the code below.

Download project

Reviews Report

Submitted by Shuvranil Mondal (Shuvranil002)

Download packets of source code on Coders Packet