Filtering Search List problem

1

I want to perform a filtered list search that it does not require words to be in order. For example let’s say I have a list which contains the word Hot Dog . If I type “Hot Dog” in the search bar it will show the result , but if I type “Dog Hot” it won’t show anything . I will post the JavaScript code below . What I need to add? ( The code is from w3schools). Any help would be greatly appreciated!

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  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";
    }
  }
}
</script>
2

You can split your input string on spaces and return values that contain either all or any of the input words.

3

Hey , I took what you posted and tried to code it with lots of trial and error for a few hours , but I couldn’t get anywhere . Would you mind giving me a part of the solution /? I’m really stuck

5

If you share what you’ve written, we can help you debug it.

6

I will post or right below . Sorry if I’m becoming annoying but I’m very to new JS and my knowledge is very limited . My friend is creating a website and he needs a search filter list which can search irrespectively of word order . To illustrate my problem here is a short gif

New code ( I just added split(" ") and trim() method , nothing special.

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().trim().split(" ").indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>
7

I meant that you want to turn the words entered by the user into an array. That way you can treat each word individually instead of the whole input as a single string.

8

@ArielLeslie @camperextraordinaire Hey I updated the code and I made it work ! However , new problem have came up. If I have the list items Hot Dog and Brown Dog for instance , if I search for " Dog Hot " , it will now show the list item Hot Dog -which is nice- but it will also show the list item Brown Dog. I don’t want this to happen. Any ideas?? Also thanks for not providing me the solution instantly , it certainly was frustrating to debug the code , but it definitely improved me as a new developer . Thanks !

    function myFunction() {

var filter =  $('input').val().toUpperCase().split(' ');
var li = $('li');
var a = $('a');
var ul;
var txtValue;
ul = document.getElementById("myUL");
for (var i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    for(var f = 0; f < filter.length; f++) {
        if (txtValue.toUpperCase().indexOf(filter[f]) > -1 ) {    
            li[i].style.display = '';
           // don't need further matches
        } else {
            li[i].style.display = 'none';
        }
    }
}

}
9

Any suggestions to fix this issue ?

10

If you look at the logic of your loop you are setting the display on every list item each time your iterate. That means that effectively only the last word in your filter array matters.

11

Does this mean that I have to break the loop at some point ?

12

That would be one possible solution.