CODEWITHSUNDEEP
javascriptjqueryhtml
theKing
theKing

Reputation: 844

How to hide the List items from Search Filter, when search input field is cleared?

I have a HTML list items like this:

<ul id="fruits">
 <li><a href="#">Mango</a></li>
 <li><a href="#">Apple</a></li>
 <li><a href="#">Grape</a></li>
 <li><a href="#">Cherry</a></li>
</ul>

User will not see these items, as we are hiding them all with style display: none;. User can search these items from below input field:

<input type="text" id="searchInput" onkeyup="fruitSearch()" placeholder="Search fruits">

When user start searching for a fruit name on the input field, it will list the matching names, just like google search suggestions. using the below the JavaScript for search:

function fruitSearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("fruits");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and show those who match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

Everything is working as designed & expected until here, once the user clears the input field all the fruit list items <li> are visible now instead of hiding.

How do I reset the list items & hide them all, when user clears the input field?

https://jsfiddle.net/kingBethal/cjbwomof/

Upvotes: 2

Views: 10627

Answers (5)

SAMCODERING
SAMCODERING

Reputation: 11

You obviously got this from w3schools meaning you did copy n' paste. You should have edited it more, because the one in w3schools shows all the items both at beginning and end. So the best solution, is to add an if...else statement like this:

    if(input.value.length === false) {
        ul.style.display = "none"
    } else {
        ul.style.display = "block"
    }

Or alternatively, you can use a switch statement.

Upvotes: -2

Milan Chheda
Milan Chheda

Reputation: 8249

You can use JQuery keyup to get the real-time case-sensitive search. And using the show and hide, you can display the relevant results. Below is an updated code: 

$("#searchInput").on('keyup', function() {
  var searchValue = $(this).val();
  searchAndFilter(searchValue)
});

function searchAndFilter(searchTerm) {
  if (searchTerm == '') {
    $("#fruits li").hide()
  } else {
    $("#fruits li").each(function() {
      var currentText = $(this).text();
      currentText = currentText.toUpperCase();
      searchTerm = searchTerm.toUpperCase();
      if (currentText.indexOf(searchTerm) >= 0) {
        $(this).show();
      }
    });
  }
}

$(document).ready(function() {
  $("#fruits li").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" placeholder="Search fruits">

<ul id="fruits">
  <li>Mango</li>
  <li>Apple</li>
  <li>Grape</li>
  <li>Cherry</li>
</ul>

Upvotes: 2

Lars Peterson
Lars Peterson

Reputation: 1508

Tip: You should add an event listener instead of using inline events.

    if (document.GetElementById('searchInput').value == '')
    {
        for (i = 0; i < li.length; i++)
        {
            li[i].style.display = none;
        }
    } else {
        // REST OF CODE
    }

Because your function gets called on every KeyUp event, simply putting the if statement inside the function will work.

Upvotes: 2

Osama
Osama

Reputation: 3040

Start your function with if statement to check the value if it is "" then according to that decide if you have to complete the rest of code or not 

var input, filter, ul, li, a, i;
 input = document.getElementById('searchInput');
 if (input.value==''){
 document.getElementById("fruits").style.display='none';
 }
 else{
 // the rest of the function
 }

Upvotes: 2

Edison Biba
Edison Biba

Reputation: 4413

Firstly you need to change your html. You need to add <a> inside your <li> tags because in your javascript code your get content from <a> element.

<ul id="fruits">
 <li><a href="#">Mango</a></li>
 <li><a href="#">Apple</a></li>
 <li><a href="#">Grape</a></li>
 <li><a href="#">Cherry</a></li>
</ul>

Then you can make a condition to check if length of input is more than one

function fruitSearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("fruits");
    li = ul.getElementsByTagName('li');

    if(input.value.length == 0){
        ul.style.display = "none";
        return;
    }else{
        ul.style.display = "block";
    }
    // 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];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

Here you have a working jsfiddle

Upvotes: 6

Related Questions