Stuck on search js

Question

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    ul.style.display = "block";
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

This is the code I have for Search but it's not working the way I need it to.

Example:

The element I want to search for is "Water Purifier - New York".

I want it to filter it even when I type Water New in search, but it doesn't. Basically, search needs to look for all elements containing given words regardless of order of those words.

user_2951933 · Answer

Your example works fine, add an eventListener on input change and you should be able to filter out your records

Also adjusted the search criteria so that it renders elements based on the inserted letters.

For example:

1.) input: wtr; output: Water Purifier - New York, world trade render

2.) input: wtrp; output: Water Purifier - New York

function myFunction(e) {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = e.target.value.toUpperCase()
  ul = document.getElementById("myUL");
  ul.style.display = "block";
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (filter.split('')
      .every(x => txtValue.toUpperCase().split('').some(y => y === x))) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

document.getElementById('search').addEventListener('input', (e) => {
  myFunction(e)
})


  Water Purifier - New York,
  Poland
  Something3
  world trade render

Stuck on search js

1 Answers