Hide list items when searching

Question

I have a list of items that I would like to filter, at the moment all of the items are visible but how can I make it so that the results only show when a user types a name?

I tried changing the li to be block but did work.

 li[i].style.display = "none";

I am new to JS and currently doing some courses.

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

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>

Here is my pen: https://codepen.io/emmabbb/pen/wvrpqbp

Answer 1

You can do this with HTML only, without JavaScript.

<h2>Car Directory</h2>
<input list="cars" placeholder="Search for Cars">

<datalist id="cars">
    <option value="Volvo">
    <option value="BMW">
    <option value="Mazda">
    <option value="Toyota">
    <option value="Yamaha">
    <option value="Honda">
    <option value="Dodge">
</datalist>

Answer 2

You can initially hiden the list. As soon as something is entered, you can delete the hide class.

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");
  
    if (input.value.length > 0)  {
      ul.classList.remove('hide');
    } else {
      ul.classList.add('hide');
    }
  
   
    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";
        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0; 
}

.hide {
  display: none;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL" class="hide">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>

Answer 3

Make sure the searchbox isn't empty by adding filter to the if statement:

if (filter && txtValue.toUpperCase().indexOf(filter) > -1)

and call your function after defining it: myFunction()

**ALSO: for your use case I think using the input event would be better than keyup

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");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (filter && txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

myFunction()

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" oninput="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>