How to Search/Filter Dropdown using jQuery

dropdown-with-serach-using-jquery

DropDown with Search using jQuery

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

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

jQuery Dropdown with Search

This code contains an HTML select element referred by its id. With this id reference, it invokes the select2 function to show this dropdown list with a search box.

While invoking this function we are passing an array of a country list to the target dropdown element.

<html>
<head>
<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"];
$("#country").select2({
data: country
	});
});
</script>
</head>
<body>
<h1>DropDown with Search using jQuery</h1>
<div>
<select id="country" style="width:300px;">
<!-- Dropdown List Option -->
</select>
</div>
</body>
</html>

We can also pass remote data to the dropdown from the database or any other data source dynamically. There are many options to provide drop-down list search with added features.

For example, we can control the minimum number of input characters we have to type for start searching.

you can also read Split and Export into Multiple Excel Sheet Files using PHP

Conclusion

Thus we have learned Jquery dropdown with search. This article contains a short example of DropDown with Search using jQuery.

I hope this example helped to create your own code to Access MySQL from PHP .

You can also read Split and Export into Multiple Excel Sheet Files using PHP

Also Read :

PHP Database Backup Client for MySQL

How to Backup MySQL Database using PHP

Update/Delete Multiple Rows using PHP

Ajax Pagination with Tabular Records using PHP and jQuery

Sendmail in PHP using mail(), SMTP with Phpmailer

PHP session time set unset and check existence

Dynamically load content in Bootstrap Modal with AJAX

How Can I Generate a Random Alphanumeric String in PHP?

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *