DropDown with Search using jQuery

Search is an useful feature for a HTML dropdown list. Especially it will increase user convenience to select items from the dropdown having long list. In this tutorial, we are going to list country dropdown with a search option. In previous tutorial we have seen countries and its dependent dropdown list.

In this tutorial we are having list of items in a Javascript array. We are using jQuery select2 library to supply these list and to display dropdown with search.

View Demo


jQuery Dropdown with Search

This code contains a HTML select element referred by its id. With this id reference it invokes select2 function to show this dropdown list with a search box. While invoking this function we are passing an array of country list to the target dropdown element.

		<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var country = ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa"];
				  data: country
		<h1>DropDown with Search using jQuery</h1>
			<select id="country" style="width:300px;">
			<!-- Dropdown List Option -->

We can also pass remote data to the dropdown from database or any other data source dynamically. There are many options to provide dropdown list search with added features. For example we can control the minimum number of input charactors we have to type for start searching.

View DemoDownload

This jQuery code tutorial was published on January 12, 2016.

↑ Back to Top