How to make an HTML dropdown select with a searchbox
As a website developer, it is almost given that at some point you will work with HTML dropdown select, presenting the user with an array of options to select from.
This happens in the instances where you want the user to choose from already predefined answers/options instead of them entering their own.
This helps reduce redundancy in the system.
For instance, if you were to require the users to input their country, but let them type in the country name instead of selecting, this would create a disaster.
Let's say the user's country is USA. Some would write "United States of America", others "USA", others "United States", while others would misspell the name and write something totally different.
It would be a disaster trying to organize, analyze and present the information based on the users' country. This shows why HTML dropdown select is quite an important form element.
However, this comes with some complexities when the select options are too many. Locating the desired option could become a headache.
For this reason, having a search box within the dropdown select options is such an incredible and life-saving feature that can save a lot of time for many users.
In this article, I will take you through a step-by-step process on how to add a search box to your forms dropdown select fields, using pure HTML or using bootstrap framework.
Making an HTML dropdown select with a search box
First, we will create a sample form on both pure HTML and in bootstrap, with a dropdown select option but without the search box. Then I will show you how to add it.
HTML form with dropdown select
<!DOCTYPE html>
<html>
<head>
<title>HTML form with dropdown select</title>
<style>
body{
background: #eee;
}
.signupdiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
border-radius: 7px;
text-align: center;
width: 35%;
display: block;
margin: auto;
margin-top: 100px;
}
#signupform{
padding: 15px;
}
input, select{
margin-bottom: 10px;
height: 38px;
border: 1px solid #ddd;
padding-left: 10px;
}
input{
width: 97%;
}
button, select{
width: 100%;
}
button{
height: 45px;
background: #188c01;
border: none;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<div class="signupdiv">
<form id="signupform">
<h3 class="text-center">Signup Form</h3>
<input type="text" id="name" placeholder="Your Name *" required>
<input type="email" id="email" placeholder="Your Email *" required>
<select id="country">
<option value="">Select your country</option>
<option value="US">United States of America</option>
<option value="KE">Kenya</option>
<option value="UK">United Kingdom</option>
<option value="IN">India</option>
<option value="CN">China</option>
<option value="CA">Canada</option>
<option value="ZA">South Africa</option>
</select>
<input type="password" id="password" placeholder="Create a Password *" required>
<input type="password" id="password" placeholder="Confirm Password *" required>
<button type="submit">Sign Up</button>
</form>
</div>
</body>
</html>
Below is the screenshot of the above code:
And below is how it looks like when you click on the dropdown select.
Bootstrap form with dropdown select
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.signupdiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 signupdiv">
<form id="signupform">
<h3 class="text-center">Signup Form</h3>
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Your Name *" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Your Email *" required>
</div>
<div class="form-group">
<select class="form-control" id="country">
<option value="">Select your country</option>
<option value="US">United States of America</option>
<option value="KE">Kenya</option>
<option value="UK">United Kingdom</option>
<option value="IN">India</option>
<option value="CN">China</option>
<option value="CA">Canada</option>
<option value="ZA">South Africa</option>
</select>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Create a Password *" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Confirm Password *" required>
</div>
<div class="form-group">
<button class="btn btn-success col-12">Sign Up</button>
</div>
</form>
</div>
</body>
</html>
Below is the screenshot of the above code:
And below is how it looks like when you click on the dropdown select.
From the examples above, there seems to be no need for a search box since we have 7 countries in our options which are all visible at once. But when we include a full list of 195 countries... It's incredibly important to have a search box to easily find the country when we start to type its name in the search box.
Below is how we do it.
Adding a search box to the dropdown select
We now will go ahead and add a search box to the forms in the above examples.
We will use Select2 to add the search box functionality to the dropdown select fields.
Select2 is a jQuery-based replacement for select boxes. It supports searching remote data sets and infinite scrolling of results.
It is compatible with all the major web browsers which include:
- IE 8+
- Chrome 8+
- Firefox 10+
- Safari 3+
- Opera 10.6+
To start using it, we will need to include the Select2 compiled JavaScript and CSS files on our website. Then, we will initialize the select2 with dropdown select input using jQuery.
There are two main ways of adding Select2 to the website:
- Using Select2 from a CDN
- Manual Installation
1. Using Select2 from a CDN
Including Select2 from a CDN (content delivery network) is the fastest way to set it up and start using it.
This is the recommended way to do include it. This makes it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released.
To include it using this method, simply include the following lines of code in the <head> section of your page.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
2. Manual Installation
To manually install Select2 into your website project, download the select2 release of your choice from Github and copy the files in the dist directory to your project.
Then in the same way as using from CDN, add the following lines of code in the <head> section of your page.
<script src="path/to/file/jquery.min.js"></script>
<link href="path/to/file/select2.min.css" rel="stylesheet" />
<script src="path/to/file/select2.min.js"></script>
Replace above, the "path/to/file/" with the path to your files.
Note: In either of the two methods, make sure to import the jQuery library into your code before importing the select2 plugin or else it won't work.
Initializing Select2 in your form dropdown select
Add the line of code below with the select input filed Id inside the jquery on ready function.
$("#idselector").select2();
Example
<script>
$(function(){
$("#idselector").select2();
});
</script>
You may also be interested in:
How to add Sort, Pagination, and Search Filter in HTML Tables
Examples
HTML form with dropdown select and search box
<!DOCTYPE html>
<html>
<head>
<title>HTML form with dropdown select</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function(){
$("#country").select2();
});
</script>
<style>
body{
background: #eee;
}
.signupdiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
border-radius: 7px;
text-align: center;
width: 35%;
display: block;
margin: auto;
margin-top: 100px;
}
#signupform{
padding: 15px;
}
input, select{
margin-bottom: 10px;
height: 38px;
border: 1px solid #ddd;
padding-left: 10px;
}
input{
width: 97%;
}
button, select{
width: 100%;
}
button{
height: 45px;
background: #188c01;
border: none;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<div class="signupdiv">
<form id="signupform">
<h3 class="text-center">Signup Form</h3>
<input type="text" id="name" placeholder="Your Name *" required>
<input type="email" id="email" placeholder="Your Email *" required>
<select id="country">
<option value="">Select your country</option>
<option value="US">United States of America</option>
<option value="KE">Kenya</option>
<option value="UK">United Kingdom</option>
<option value="IN">India</option>
<option value="CN">China</option>
<option value="CA">Canada</option>
<option value="ZA">South Africa</option>
</select>
<input type="password" id="password" placeholder="Create a Password *" required>
<input type="password" id="password" placeholder="Confirm Password *" required>
<button type="submit">Sign Up</button>
</form>
</div>
</body>
</html>
Below is the screenshot of the code above:
Take note of the selector "#country" in initializing the select2. We have used it because it is the id of our countries input field.
Bootstrap form with dropdown select and search box
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function(){
$("#country").select2();
});
</script>
<style>
body{
background: #eee;
}
.signupdiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 signupdiv">
<form id="signupform">
<h3 class="text-center">Signup Form</h3>
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Your Name *" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Your Email *" required>
</div>
<div class="form-group">
<select class="form-control" id="country">
<option value="">Select your country</option>
<option value="US">United States of America</option>
<option value="KE">Kenya</option>
<option value="UK">United Kingdom</option>
<option value="IN">India</option>
<option value="CN">China</option>
<option value="CA">Canada</option>
<option value="ZA">South Africa</option>
</select>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Create a Password *" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Confirm Password *" required>
</div>
<div class="form-group">
<button class="btn btn-success col-12">Sign Up</button>
</div>
</form>
</div>
</body>
</html>
Below is the screenshot of the code above:
If you were keen, you may have noticed that after adding and initializing select on our dropdown select, its height was reduced compared to the other input fields.
To set it to your custom height, just code the CSS code below add it to your other CSS code in the head section, or in an external CSS file. Remember to height attribute values to your desired ones.
That's all for now!
Conclusion
When working with HTML form dropdown select fields, you may get to a point where the select options are too many. In such a scenario, it may be tiring for the users to locate their preferred option.
Adding a search box on top of the dropdown options can save them a great deal, increasing the user experience of your site.
In this article, we have covered a comprehensive step-by-step process on how to design nice-looking forms in HTML and bootstrap framework. With have designed forms with dropdown select options and added a search box to them in order to simplify the finding of the preferred options.
It's my hope that you have enjoyed this tutorial and found it useful. We strive to keep adding more incredible content on a regular basis. To get notified when we add new, subscribe to our email newsletter.
You may also consider linking to this page from your website or share it to your networks on social media to help reach more people.
Enjoy your coding!
