How to create search bar for name search json javascript using filter

Question

I am creating website of student community. Having difficulty in adding Search Bar option to website. I can add normal for search but had bug for all together.

https://cloudlord-and-pals.netlify.app/htmlfiles/members.html How should I add name search here?

const search = async()=> {
 let input = document.querySelector(".input").value
 let searchContainer = ''

 const res = await getAllStudent()
 let response = res.data.students

 let searchTrack = response.filter(item => {
 return input === item.name || parseInt(input) === item.stuId || parseInt(input) === item.circle
   
})
  searchTrack.length > 0?

  searchTrack.forEach((searchItem, index) => {
    const {id,name, stuId, track, img, description, socialmedia:{linkedin, github, twitter, portfolio}} = searchItem;
    

    let newIndex = index+id;
    

Answer 1

Because you already have the names on the page, you do not need to fetch them again to search for them.

The following function searches every card for the value you enter in the search bar, and only shows the cards that include that value. Keep in mind that the function searches the entire <div class="profile-card">...</div> , so anything on both sides of the card will be searched.

function search() {
    let input = document.querySelector(".input").value
    input = input.toLowerCase();
    let x = document.getElementsByClassName('profile-card');

    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display = "none";
        }
        else {
            x[i].style.display = "block";
        }
    }
}

css-tricks has an article that explains this a little better.

Good luck!

Answer 2

Here are some extra functions:

const stringLowerCase = (value) => value.toString().toLowerCase();

const isMatched = (value, matchBy) => stringLowerCase(value).match(stringLowerCase(matchBy));

Then I updated your filter code:

let searchTrack = response.filter( (item) => isMatched(item.name, input) || isMatched(item.stuId, input) || isMatched(item.circle, input) );