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.

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:

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: