Select2 is a jQuery plugin which extends the functionality of simple HTML drop-down element by allowing to search the list, adding the image with options, navigate to option with arrow keys, etc.
It comes with the AJAX supports where you can call it in the same way as $.ajax in the jQuery.
The plugin provides the currently inputted value in the search box which can be used as data in the AJAX request.
Contents
1. Table structure
I am using users table.
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `password` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Configuration
Create a config.php for database configuration.
Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3. Download and Include
- Download the library from here.
- Include
select2.min.cssandselect2.min.jsfiles with the jQuery library at the<head>section. You can also use the CDN.
<meta charset="UTF-8"> <link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>
4. HTML
Create a drop-down element.
Completed Code
<select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select>
5. PHP
Create a getData.php file.
Select all records with the limit of 5 when $_POST['searchTerm'] is not set otherwise select record according to the search term.
Create an array which initializes with user id and name. Return the array in JSON format.
NOTE – While creating associative array for initialize the Array make sure that their you have defined
idandtextkeys otherwise the HTML element will not be initialized.
Completed Code
<?php
include 'config.php';
if(!isset($_POST['searchTerm'])){
$fetchData = mysqli_query($con,"select * from users order by name limit 5");
}else{
$search = $_POST['searchTerm'];
$fetchData = mysqli_query($con,"select * from users where name like '%".$search."%' limit 5");
}
$data = array();
while ($row = mysqli_fetch_array($fetchData)) {
$data[] = array("id"=>$row['id'], "text"=>$row['name']);
}
echo json_encode($data);
6. jQuery
Call select2() method on the <select id='selUser'> to initialize the plugin. To load records remotely specify ajax option where set its url, type, dataType, delay, data, and processResults.
Get the entered values using params.term in data. The successful callback handle by processResults function where initialize results with the response.
Completed Code
$(document).ready(function(){
$("#selUser").select2({
ajax: {
url: "getData.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});
7. Demo
Click on the Drop down and search a user.
8. Conclusion
Define ajax option in select2() method while initializing the element. Initialize results with the return response.
View the official documentation for more details.
If you found this tutorial helpful then don't forget to share.2
well done!
it is amazing and it is the best select2 tutorial I ever seen before
Sir,can I predefined the selected option?
i am appreciated greatly your help
I solved it by the follow code
it require id and full_name
can I complete it by only id
many thanks
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger(‘change’);
Awesome solution
if the select have an item selected, the json parameter’s selected:true,how working on the jquery?
very good tutorial, i needed this functionality for a select2 dropdown in yii2, i have googled it and found so many irrelevant answers, this one is the best i have seen ever
how select column with links, show as text not link
and thank very much for this tutorial
how select column with links, show as text not link, and open after select – https://www.soleis.info/select2/
Thanks for the aowesome lesson.
But what do I need to modify if I wanted to make 3 or select2 inputs with ajax in the same page.
I tried it with two, but the JS code looks not working any more?
Hi Sameh,
You can add multiple select2 elements on the same page but you need to maintain selector initialization. Here, is the working link.
Hi Yogesh,
When I applied this to my page with multiple select2 with different data, the code stopped working, I had to put PHP codes in separated files in order to run them.
Do you have an idea to put them all in one PHP file?
Kind Regards,
Sameh
Hi Sameh,
For this, you need pass extra parameter with AJAX data like – data: function (params) {return {request: 1,searchTerm: params.term // search term};},Then on your AJAX file handle request with request parameter. I updated the example link.