how do you create a filter search in javascript?

Question

i like the editable filter search list in w3shools. https://www.w3schools.com/howto/howto_js_filter_lists.asp .

It is using this below javascript code to do the filtering.

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

I need a modification somewhere by SO community so that when the search box has nothing written the returned filtered items is none. In the above code when nothing is written the results is to show all items in the list.

I am not that good with javascript so someone here may be able to re-code this for me. I am thinking the change should should happen in line 11 for (i = 0; i < li.length; i++) .

Answer 1

1. First hide all in CSS #myUL li {display: none; } #myUL li {display: none; }
2. On input show all first so search can search text (created showALL() function call it on input), this needs to be done because search does not work on display none elements.
3. React only if input is not empty - added to filter if (txtValue.toUpperCase().indexOf(filter) > -1 && input.value != "") {

 function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); showALL() // on input show all for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1 && input.value != "") { // react only if input is not empty with && input.value != "" li[i].style.display = "block"; } else { li[i].style.display = "none"; } } } // showALL() function you called on input const showALL = () => { [...document.querySelectorAll('#myUL li')].forEach( li => { li.style.display = "block"; } ) }

 #myInput { background-image: url('/css/searchicon.png'); /* Add a search icon to input */ background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 100%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } #myUL { /* Remove default list styling */ list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; /* Add a border to all links */ margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; /* Grey background color */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove default text underline */ font-size: 18px; /* Increase the font-size */ color: black; /* Add a black text color */ display: block; /* Make it into a block element to fill the whole list */ } #myUL li a:hover:not(.header) { background-color: #eee; /* Add a hover effect to all links, except for headers */ } /* First hide all */ #myUL li { display: none; }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul>