Use jQuery to loop through each list to check if there are any text values that matches the value of the input field. - Javascript jQuery

Javascript examples for jQuery:List

  1. HOME
  2. Javascript
  3. jQuery
  4. List

Description

Use jQuery to loop through each list to check if there are any text values that matches the value of the input field.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });//  ww  w. j  av a2s  . c o  m
  });
});
</script>
</head>
<body>

<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input id="myInput" type="text" placeholder="Search..">
<br>

<ul id="myList">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>

</body>
</html>

Related Tutorials