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.


  • 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>
<title>Search filter </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>


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;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  padding left: 10px;
    text-align: center;
    color: powderblue;
    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;



after searching letter m,

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