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

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;

CodePudding user response：

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) );

CodePudding user response：

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