Dropdown search box jquery example with select2.min.js

by

Dropdown search box jquery example with select2.min.js

Hi friends, In this tutorial, we will discuss regarding dropdown search box jquery example with select2.min.js plugin. The default dropdown box in HTML or bootstrap does not have the option for searching data. Sometimes, we need to search for individual data from huge data sets in select boxes.

In such a case, select2.min.js plugin helps us to do so and gives us the search box option. With the help of this plugin, we can easily search for data from the select options as per our needs.

There are two ways available to use this plugin successfully

  1. Use the plugin from the CDN network directly.
  2. Download the plugin from Github and install it to use in your source code or HTML file.

How to use select2.min.js from a CDN (Content delivery network)

This plugin is available in the jsDelivr and cdnjs. These are the CDN network for jQuery. You can simply include the below lines inside the head section of your web page or HTML file.

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

How to install select2.min.js in localhost or locally for the dropdown search box

  • To install this plugin, you can simply download from the above-mentioned link from Github and extract the plugin zip file and place the extracted folder where you have created your PHP file in the root directory.
  • You can find the CSS and js files for select2.min.js plugin inside the dist folder of your extracted folder.
    Include the CSS file in the head section of the web page as shown below
<link rel="stylesheet" href="select2/dist/css/select2.min.css" crossorigin="anonymous">
  • Include the js file in the script tag before the end of the body tag as shown below
  <script src="select2/dist/js/select2.min.js"></script>
  • Include the below code inside the script tag
<script>
   $(document).ready(function(){
     $('#city').select2();
   });
</script>

Browser Compatibility of select2.min.js

It supports in the following browsers

  • IE 8+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+

In this tutorial, I am using a table name “state” from my database to put the data sets inside the select box options.

DDL information of the table

CREATE TABLE state (
id int(10) unsigned NOT NULL AUTO_INCREMENT,
state_name varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Use a PHP script to fetch the table data from database as shown below

<?php
include('connect.php');

	$stmt = $con->prepare("select * from state");
	$stmt->execute();
	$state_details = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

Note:-

Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively as shown below.

<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>

Complete Code:-

<?php
include('connect.php');

	$stmt = $con->prepare("select * from state");
	$stmt->execute();
	$state_details = $stmt->fetchAll(PDO::FETCH_ASSOC);
	
?>
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<link rel="stylesheet" href="select2/dist/css/select2.min.css" crossorigin="anonymous">
<style>
.container{
	width:50%;
	height:30%;
	padding:20px;
}
</style>
</head>

<body>
	<div class="container">
	<h3><u>Search data in select boxes with select2.min.js</u></h3>
	<br/><br/>
	<div class="row">
		<div class="col-sm-8">
			<div class="form-group">
			    <label for="name">City Names:</label>
			    <select class="form-control form-control-sm" name="city_name" id="city">
			    	<option value="">Please Select</option>
		<?php
		foreach ($state_details as $key => $value) {
			# code...
		     echo '<option value="'.$value['id'].'">'.$value['state_name'].'</option>';
			
		}
		?>
	</select>
</div>
</div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="select2/dist/js/select2.min.js"></script>
<script>
   $(document).ready(function(){
     $('#city').select2();
   });
</script>
</body>
</html>

Also, Read How to export MySQL table data into excel using jQuery

Conclusion:

I hope this article will help you to understand the working of select2.min.js plugin. If you have any doubt then please leave a comment below.


1 thought on “Dropdown search box jquery example with select2.min.js”

  1. Hi there, I believe your blog could be having web browser compatibility issues.
    When I take a look at your web site in Safari, it looks fine however when opening in IE,
    it has some overlapping issues. I just wanted to give you a quick
    heads up! Other than that, wonderful site!

    Reply

Leave a Comment