¿Cómo puedo agregar palabras clave a los productos en mi barra de búsqueda? por ejemplo, si quiero encontrar "BRIT PREMIUM BY NATURE ADULT L PUI 15KG", me gustaría simplemente escribir "BRIT ADULT L PUI 15KG" y aún encontrar el producto, aquí está el código que uso:
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; }En lugar de buscar toda la entrada del usuario, dividí la entrada en palabras y busqué cada palabra por separado
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; }