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