In this tutorial, I will show you how we can add a complete jQuery UI to the text box and select one or more values ​​from the suggestions list.

Steps

Step-1: Table Structure

I am using users table for this example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Step-2: Configuration

Create a new config.php file.

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());
}
?>


Step-3: Download and Include


Download jQuery and jQuery UI libraries.

With jQuery then enter the jQuery UI script and CSS files in the <head> or end of the </body>.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


Step-4: HTML

Create 4 input boxes-

  • The first text box to install the auto-complete widget.
  • The second is used to display the selected user id from the suggestions list.
  • The third text box to add more auto-complete.
  • The fourth text box to show multiple selected user ids.

Completed Code

<table>
  <tr>
    <td>Single selection</td>
    <td><input type='text' id='autocomplete' ></td>
  </tr>

  <tr>
    <td>Selected User id</td>
    <td><input type='text' id='selectuser_id' /></td>
  </tr>

  <tr>
    <td>Multiple Selection</td>
    <td><input type='text' id='multi_autocomplete' ></td>
  </tr>

  <tr>
    <td>Selected User ids</td>
    <td><input type='text' id='selectuser_ids' /></td>
  </tr>

</table>


Step-5: PHP

Create a new fetchData.php file.

Completed Code

<?php

include "config.php";

if(isset($_POST['search'])){
 $search = mysqli_real_escape_string($con,$_POST['search']);

 $query = "SELECT * FROM users WHERE name like'%".$search."%'";
 $result = mysqli_query($con,$query);

 $response = array();
 while($row = mysqli_fetch_array($result) ){
   $response[] = array("value"=>$row['id'],"label"=>$row['name']);
 }

 echo json_encode($response);
}

exit;
?>


Step-6: jQuery

Initialize

Create 2 functions-

  • split()
  • extractLast()

Fetch Source

  • Single Selection
  • Multiple Selection

Item Selection

  • Single Selection
  • Multiple Selection

Completed Code

$( function() {

 // Single Select
 $( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
   // Fetch data
   $.ajax({
    url: "fetchData.php",
    type: 'post',
    dataType: "json",
    data: {
     search: request.term
    },
    success: function( data ) {
     response( data );
    }
   });
  },
  select: function (event, ui) {
   // Set selection
   $('#autocomplete').val(ui.item.label); // display the selected text
   $('#selectuser_id').val(ui.item.value); // save selected id to input
   return false;
  }
 });

 // Multiple select
 $( "#multi_autocomplete" ).autocomplete({
    source: function( request, response ) {
                
      var searchText = extractLast(request.term);
      $.ajax({
         url: "fetchData.php",
         type: 'post',
         dataType: "json",
         data: {
           search: searchText
         },
         success: function( data ) {
           response( data );
         }
       });
    },
    select: function( event, ui ) {
        var terms = split( $('#multi_autocomplete').val() );
                
        terms.pop();
                
        terms.push( ui.item.label );
                
        terms.push( "" );
        $('#multi_autocomplete').val(terms.join( ", " ));

        // Id
        terms = split( $('#selectuser_ids').val() );
                
        terms.pop();
                
        terms.push( ui.item.value );
                
        terms.push( "" );
        $('#selectuser_ids').val(terms.join( ", " ));

        return false;
     }
           
 });

});
function split( val ) {
   return val.split( /,s*/ );
}
function extractLast( term ) {
   return split( term ).pop();
}