CODEWITHSUNDEEP
javascripthtmlfunctionsearchfilter
shvan
shvan

Reputation: 57

Search Function does not filter all values

I am working on a search function with a scroll-list on a webpage. Here is the JS I have: 

function mysearchFunction() {

    var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("mysearchInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        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";
        }
    }
}

and HTML

<th>
    <input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search for location..." title="Location">
        <button onclick="mysearchFunction();">Search</button>
        <ul id="myUL">
        <li><a href="">IT</a><li>
        <li><a href="">Dragon's Room</a></li>
        <li><a href="">Door 4</a></li>
        <li><a href="">Cafeteria </a></li>
        <li><a href="">Dragons Den </a></li>
        <li><a href="">Dragons Tail </a></li>
        <li><a href="">Dragon </a></li>
        </ul>
</th>
</html>

The search function works, however it only filters until the first value. eg. If I search "dragon", and I have 3 dragons in the scroll list, it would produce a result of "Dragon, Car, Cat, Dragon1, Dragon2" I am sorry if the question is too basic. I am still learning JS and web development, so I am not sure to to approach the problem.

Upvotes: 0

Views: 68

Answers (2)

Samuel Goldenbaum
Samuel Goldenbaum

Reputation: 18939

I think the issue could be how you are calling the function.

Please see the working demo below which includes a click event on the button to trigger the function.

function mysearchFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("mysearchInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  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";
    }
  }
}
<input id="mysearchInput" type="text" placeholder="search" />
<button onclick="mysearchFunction();">Search</button>

<ul id="myUL">
  <li><a>Dragon</a></li>
  <li><a>Car</a></li>
  <li><a>Cat</a></li>
  <li><a>Dragon1</a></li>
  <li><a>Dragon2</a></li>
</ul>

UPDATE After OP shared there HTML, it was clear a missing closing tag was causing the issue:

<li><a href="">IT</a><li> // closing </li> needed

Upvotes: 1

Allen Haley
Allen Haley

Reputation: 657

I've just noticed what the problem is. Probably, your code has an error while executing for phrase because of empty li.

The following code will be working fine.

function mysearchFunction() {

    var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("mysearchInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];

/***** updated code from here ******/
        if (a) {
          txtValue = a.textContent || a.innerText;
        } else {
          txtValue = '';
        }
/***** updated code to here ******/
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } 
        else {
            li[i].style.display = "none";
        }
    }
}

Upvotes: 0

Related Questions