Loading data remotely in Select2 with AJAX

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.

Loading data remotely in Select2 with AJAX


Contents

  1. Table structure
  2. Configuration
  3. Download and Include
  4. HTML
  5. PHP
  6. jQuery
  7. Demo
  8. Conclusion

 

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.css and select2.min.js files 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>
<scirpt src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'></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 id and text keys 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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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