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:-

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.