How can i add keywords to products in my search bar? for example if i want to find "BRIT PREMIUM BY NATURE ADULT L PUI 15KG" i wold like to just type "BRIT ADULT L PUI 15KG" and still find the product, here it's the code i use:
SearchBx.onkeyup = (e)=>{
console.log(e);
let userData = e.target.value;
let emptyArray = [];
if(userData){
emptyArray = suggestions.filter((data)=>{
return data.toLocaleLowerCase().includes(userData.toLocaleLowerCase());
});
emptyArray = emptyArray.map((data)=>{
return data = '<li>'+ data + '</li>';
});
console.log(emptyArray);
Main.classList.add("show");
}else{
}
showSuggestions(emptyArray);
let allList = AutoBox.querySelectorAll("li");
// for (let i = 0; i < allList.length; i++) {
// allList[i].setAttribute("onclick", "select(this)");
// }
for(const el of allList){ // use for..of instead of indexed for
el.addEventListener('click', (e) => { // attach an event listener instead of using the onclick attribute
SearchBx.value = e.target.textContent; // can be a separate function like 'select', but whatever
ouvrirPage(); // trigger page opening from click event
});
}
}
// function select(element){
// let selectUserData = element.textContent;
// SearchBx.value = selectUserData;
// }
function showSuggestions(list){
let listData;
if(!list.length){
userValue = SearchBx.value;
listData = '<li>'+ userValue +'</li>'
}else{
listData = list.join('');
}
AutoBox.innerHTML = listData;
}
Instead of searching for the entire user input, i splited the input into words, and search for each word separatedly
SearchBx.onkeyup = (e)=>{
console.log(e);
let userData = e.target.value;
let emptyArray = [];
if(userData){
emptyArray = suggestions.filter((data)=>{
//####################################
//########### CHANGED HERE ###########
//####################################
//return data.toLocaleLowerCase().includes(userData.toLocaleLowerCase());
let wordsTypedByTheUser = userData.toLocaleLowerCase().split(' ');
return wordsTypedByTheUser.every(word => data.toLocaleLowerCase().includes(word));
//#######################
//########### END #######
//#######################
});
emptyArray = emptyArray.map((data)=>{
return data = '<li>'+ data + '</li>';
});
console.log(emptyArray);
Main.classList.add("show");
}else{
}
showSuggestions(emptyArray);
let allList = AutoBox.querySelectorAll("li");
// for (let i = 0; i < allList.length; i++) {
// allList[i].setAttribute("onclick", "select(this)");
// }
for(const el of allList){ // use for..of instead of indexed for
el.addEventListener('click', (e) => { // attach an event listener instead of using the onclick attribute
SearchBx.value = e.target.textContent; // can be a separate function like 'select', but whatever
ouvrirPage(); // trigger page opening from click event
});
}
}
// function select(element){
// let selectUserData = element.textContent;
// SearchBx.value = selectUserData;
// }
function showSuggestions(list){
let listData;
if(!list.length){
userValue = SearchBx.value;
listData = '<li>'+ userValue +'</li>'
}else{
listData = list.join('');
}
AutoBox.innerHTML = listData;
}