How to create Search or filter list in JavaScript

Create a program that searches lists using the javascript function. Let’s create a simple web page to perform and design a search filters list using HTML, CSS, javascript.

Problem statement

In this task, we have to learn how to create a search filter list using javascript. For that create an HTML file and use the JS function that displays the output.

Solution

Create HTML file
Enter suitable heading in <h1></h1> tag <h1>Search filter in javascript</h1>
Enter subheading in <h2></h2> tag <h2>Your State Name</h2>
Take input type <input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search names..” title=”Type in a name”>
Use <ul> tag for unordered list with <li> tag to create unordered list <ul id=”myUL”>
<li><a href=”#”>Andhra Pradesh</a></li>…
In script create new function myfunction() in that declare variables var input, filter, ul, li, a, i, txtValue;
Use input = document.getElementById(“myInput”) ; it returns collection of elements with tag names
Use filter = input.value.toUpperCase() ; which accept single value and returns another value .
Use for loop through all list items and hide those who don’t match to 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”;
}
Use CSS for styling the page.

JS code to create search filter list using js function

<!DOCTYPE html>
<html>
<head>
<title>Search filter </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Search filter in javascript</h1>
<h2>Your State Name</h2>

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

<ul id="myUL">
  <li><a href="#">Andhra Pradesh</a></li>
  <li><a href="#">Arunachal Pradesh </a></li>

  <li><a href="#">Assam </a></li>
  <li><a href="#">Bihar </a></li>

  <li><a href="#">Chhattisgarh </a></li>
  <li><a href="#">Goa </a></li>
  <li><a href="#">Gujarat </a></li>

    <li><a href="#">Haryana  </a></li>
  <li><a href="#">Himachal Pradesh </a></li>
  <li><a href="#">Jammu and Kashmir </a></li>

  <li><a href="#">Jharkhand  </a></li>
  <li><a href="#">Karnataka  </a></li>
  <li><a href="#">Kerala  </a></li>

  <li><a href="#">Madhya Pradesh </a></li>
  <li><a href="#">Maharashtra  </a></li>
  <li><a href="#">Manipur  </a></li>

</ul>

<script>
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";
        }
    }
}
</script>
<style>
* {
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  padding left: 10px;
}
h1{
    text-align: center;
    color: powderblue;
}
h2{
    text-align: center;
    color: darkblue;
}
#myInput {
    text-align: center;
  background-image: url('/css/searchicon.png');
  background-position: 8px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 12px;
  margin-left: 35%;
  padding: 8px 15px 10px 20px;
  border: 1px solid #ddd;
  margin-bottom: 6px;
}

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

#myUL li a {
    text-align: center;
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 10px;
  text-decoration: none;
  font-size: 12px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
    text-align: center;
  background-color: #eee;
}
</style>

</body>
</html>

Output

after searching letter m,

In this way, we learn how to create a search filter list using the Javascript function.