CODEWITHSUNDEEP
javascript
GGalusca
GGalusca

Reputation: 101

JS search bar keywords

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

Upvotes: 1

Views: 319

Answers (1)

Paulo Fernando
Paulo Fernando

Reputation: 3670

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

Upvotes: 1

Related Questions