Use Javascript to search for all text inside a
element

Question

I am trying to create an input field to search for text within an unordered list element. I have it working, but it only searches for the first word in the li.

How can I make it so it searches for all words?

        var input = document.getElementById("input");
        input.onkeyup = function () {
          var filter = input.value.toUpperCase();
          var lis = document.getElementsByTagName("li");
          for (var i = 0; i < lis.length; i++) {
            var name = lis[i].getElementsByClassName("name")[0].innerHTML;
            if (name.toUpperCase().indexOf(filter) == 0)
              lis[i].style.display = "list-item";
            else lis[i].style.display = "none";
          }
        };

<input type="text" id="input" placeholder="Search for something..." />

<ul>
<li><h3 class="name">Walking on the moon</h3></li>
<li><h3 class="name">Visiting the zoo</h3></li>
<li><h3 class="name">Freshly baked bread</h3></li>
</ul>

For example, how can I search for moon, zoo, and bread, and have those li's show when searched for?

`.indexOf(filter) == 0` is basically the same as `startsWith`. Use `.includes` instead — CertainPerformance, Sep 22 '20 at 01:05
@CertainPerformance Where do I add ".includes" into the code? — javinladish, Sep 22 '20 at 01:12
See the linked question - call `includes` on the string you're searching, and pass it what you're searching for — CertainPerformance, Sep 22 '20 at 01:12
See [this Fiddle](https://jsfiddle.net/Lf5e0xvn/) for working code that removes many of the outdated code you are currently using along with explanations. — Scott Marcus, Sep 22 '20 at 01:16

Use Javascript to search for all text inside a element

0 Answers0

Use Javascript to search for all text inside a
element