Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

dropdown
dropdown search
text search
html

How to make a dropdown with searchable text

Educative Answers Team

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.

drop-down search box
drop-down search box

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:

RELATED TAGS

dropdown
dropdown search
text search
html
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring