Guide to concealing List elements from the Search Filter when the search input field is emptied

Question

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure:

<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>

To hide these items, I have applied the style display: none;. However, users can still search for these hidden fruits using the following input field:

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

The JavaScript function fruitSearch() allows users to search for fruit names and provides suggestions similar to Google's search feature:

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 that 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 works perfectly until the user clears the input field. In this case, all the fruit list items <li> become visible instead of staying hidden.

I am looking for a solution to reset and hide all the list items when the user clears the input field. Any suggestions or ideas?

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

javascript jquery html

Answer 1

Answer №1

First, you should modify your HTML structure by adding the <a> element inside each <li> tag. This is necessary because in your JavaScript code, you are retrieving content from the <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>

Next, you can implement a condition to check if the length of the input is greater 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 that do not 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";
        }
    }
}

Feel free to check out this functional JSFiddle for reference.

Answer 2

First, you should modify your HTML structure by adding the <a> element inside each <li> tag. This is necessary because in your JavaScript code, you are retrieving content from the <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>

Next, you can implement a condition to check if the length of the input is greater 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 that do not 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";
        }
    }
}

Feel free to check out this functional JSFiddle for reference.

Answer 3

Answer №2

Before proceeding further, make sure to include an if statement at the beginning of your function to check whether the value is empty. Based on this condition, you can determine whether or not you should proceed with the remaining code.

var inputValue, filterParam, ulElement, liElements, anchorElement, index;
inputValue = document.getElementById('searchInput');
if (inputValue.value == ''){
  document.getElementById("fruits").style.display = 'none';
} 
else {
  // continue executing the rest of the function
}

Answer 4

Before proceeding further, make sure to include an if statement at the beginning of your function to check whether the value is empty. Based on this condition, you can determine whether or not you should proceed with the remaining code.

var inputValue, filterParam, ulElement, liElements, anchorElement, index;
inputValue = document.getElementById('searchInput');
if (inputValue.value == ''){
  document.getElementById("fruits").style.display = 'none';
} 
else {
  // continue executing the rest of the function
}

Answer 5

Answer №3

Did you know? It is recommended to utilize event listeners 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
    }

Since your function is called during each KeyUp event, simply including the if statement within the function will suffice.

Answer 6

Did you know? It is recommended to utilize event listeners 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
    }

Since your function is called during each KeyUp event, simply including the if statement within the function will suffice.

Answer 7

Answer №4

You can employ the power of JQuery's keyup event to achieve a real-time search that takes case sensitivity into consideration. By using the show and hide functions, you can display only the relevant results. Feel free to check out the updated code below:

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

function performSearchAndFilter(searchTerm) {
  if (searchTerm == '') {
    $("#fruits li").hide()
  } else {
    $("#fruits li").each(function() {
      var innerText = $(this).text();
      innerText = innerText.toUpperCase();
      searchTerm = searchTerm.toUpperCase();
      if (innerText.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>

Answer 8

You can employ the power of JQuery's keyup event to achieve a real-time search that takes case sensitivity into consideration. By using the show and hide functions, you can display only the relevant results. Feel free to check out the updated code below:

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

function performSearchAndFilter(searchTerm) {
  if (searchTerm == '') {
    $("#fruits li").hide()
  } else {
    $("#fruits li").each(function() {
      var innerText = $(this).text();
      innerText = innerText.toUpperCase();
      searchTerm = searchTerm.toUpperCase();
      if (innerText.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>

Answer 9

Answer №5

It seems that you have obtained this code from a popular coding resource, suggesting that you may have performed a simple copy and paste. To improve upon this, it would be advisable to make further modifications. The original version found on the respective website displays both the items at the beginning and end. Therefore, we can propose a more effective solution by incorporating an if...else statement:

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

Alternatively, you could consider employing a switch statement.

Answer 10

It seems that you have obtained this code from a popular coding resource, suggesting that you may have performed a simple copy and paste. To improve upon this, it would be advisable to make further modifications. The original version found on the respective website displays both the items at the beginning and end. Therefore, we can propose a more effective solution by incorporating an if...else statement:

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

Alternatively, you could consider employing a switch statement.

Guide to concealing List elements from the Search Filter when the search input field is emptied

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

Having trouble with selecting checkboxes in a div using jQuery? While it may work in IE and Firefox, Chrome seems to be causing issues

Encountering issues when trying to combine Sequelize with TypeScript

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

The issue of try-catch not functioning properly within a recursive function

Issues with Javascript functionality on aspdotnetstorefront site

Clicking on the button has no effect whatsoever

What is causing the delay in retrieving elements using getX() method in Selenium?

Node.js publication date displaying incorrectly

What is the best way to design a Global Navigation menu for websites?

The side navigation panel transition is stuck and failing to slide out as intended

Spinner displayed upon task completion

Employing global variables in JavaScript files with Vue3

jsTree open_all not triggering consistently

Utilizing jQuery to Trigger a Click Event on an Element Without a Class

Incorporate jQuery into Laravel 5.4 mix for enhanced functionality

Looking for a comprehensive calculation that takes into account various input values?

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

Switch back JSON in php script

Error with Vimeo SDK: Mysterious Player Issue Post Setup (VueJS)