How to Create Dropdown With Search Box Using jQuery

How to Create Dropdown With Search Box Using jQuery

by

In this tutorial, we are going to see how to add search box in drop-down list. When we use drop-down with huge list of value then it become tough for website user to select a particular value. Adding a search box to Dropdown using jQuery helps to filter value from list.

Here we will use select2 jQuery library to get Dropdown with search box. Let us see how to create Dropdown with search box using jQuery.

Steps:
1. Download and include select2 library file
2. HTML
3. JavaScript

View Demo

1. Download and include select2 library file

Download and include select2 libray file like JS and CSS.

Include Css file and JS file before head close tag.

<!-- CSS --> 
<link href='select2.min.css' rel='stylesheet' type='text/css'>
<!-- JS --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src='select2.min.js' type='text/javascript'></script>

2. HTML 

<select name="language" id="dropdown">
<option value="PHP">PHP</option> 
<option value="MySQL">MySQL</option> 
<option value="jQuery">jQuery</option> 
<option value="AJAX">AJAX</option> <option value="JavaScript">JavaScript</option> 
</select>

3. JavaScript 

<script> 
$(document).ready(function(){
 $("#dropdown").select2(); 
}); 
</script>

To get complete script click on download button. If you liked this article, don’t forget to share.

[sociallocker] Download [/sociallocker]

Leave a Comment