A user may frequently make use of drop-down search boxes while designing applications, web pages, etc. When you type something in the google search box, it gives a list of results as options in a drop-down box. In this shot, we will make a drop-down searchable box with HTML and Jquery. Look at the image below to see what a drop-down search box might look like. 



First, we will introduce some HTML code in a notepad file to provide a list of Asian countries as a *drop down*. As you can see, we use the tags, `select` and `option` to write the countries that can be selected. This entire code is part of the body of HTML. 

You can see our desired output in the `Output` tab below:

<!DOCTYPE html>
<html>

<body>
<center>

<h2> Searching for Asian countries:</h2>


    <select>
    <option>Pakistan</option>
    <option>India</option>
    <option>Bangladesh</option>
    <option>SriLanka</option>
    <option>China</option>
    <option>Nepal</option>
    <option>Bhutan</option>
    </select>
 </center>
 </body>
</html>

codemirror

Then, we will define the function `Func()`. `Func()` takes the input from the user -- it receives all the options defined under the `<select>` tag. Now ,it will iterate through the options to see if they match with the input by the user. 

You can see the results of the listed options under the arrow: 

<!DOCTYPE html>
<html>

<body>
<center>

<h2> Searching for Asian countries:</h2>

<div class="drop-down">
  
  <div id="Dropdown" class="dropdown-content">
    <input type="text" id="userInput" onkeyup="Func()">
    <select>
    <option>Pakistan</option>
    <option>India</option>
    <option>Bangladesh</option>
    <option>SriLanka</option>
    <option>China</option>
    <option>Nepal</option>
    <option>Bhutan</option>
    </select>
  </div>
</div>

<script>



function Func() {
  var input, filter, a;

  // take user input
  input = document.getElementById("userInput");
  
  // convert the input to upper case letter for easy comparison
  filter = input.value.toUpperCase();

  div = document.getElementById("Dropdown");

  // get all the options as a list
  a = div.getElementsByTagName("option");

  // iterate through the entire list and output relevant results if found
  for (var i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
</center>
</body>
</html>



How to make a dropdown with searchable text

A user may frequently make use of drop-down search boxes while designing applications, web pages, etc. When you type something in the google search box, it gives a list of results as options in a drop-down box. In this shot, we will make a drop-down searchable box with HTML and Jquery. Look at the image below to see what a drop-down search box might look like. 