jQuery UI autocomplete with PHP and AJAX

The autocomplete functionality shows the suggestion list according to the entered value. The user can select a value from the list.

With jQuery UI you can easily add autocomplete widget on the input element. Navigate to the suggestion list either by mouse or keyboard arrow keys.

It has the various options that allow us to customize the widget.

You can fix the suggestion source value while initializing in this case whenever the user typed any character then it searches the value within the given source value or you can make it dynamic with AJAX.

In the demonstration, I am implementing this on an element which shows the user’s name list according to the entered value with AJAX.

jQuery UI autocomplete with PHP and AJAX


Contents

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

 

1. Table structure

Using users table in the demonstration.

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;

 

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

 

3. Download and Include

  • Download jQuery and jQuery UI libraries.
  • With jQuery and include jQuery UI library script and CSS files in the <head> section or end of </body>.
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

 

4. HTML

Create two input boxes –

  • The first textbox to add autocomplete widget, and
  • The second is used to show selected user id from the suggestions list.

Completed Code

<input type='text' id='autocomplete' ><br/><br/>

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

 

5. PHP

Create new fetchData.php file.

On the basis of POST search value fetch records from the users Table. Declare an Array variable $response and initialize it with an associative array where pass the user id in value key and user name in label key.

Completed Code

<?php

include "config.php";

if(isset($_POST['search'])){
 $search = $_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;

NOTE – Remove value key from the array if you only want to work it name e.g. $response[] = array("label"=>$row['name']);


 

6. jQuery

Initialize

Initialize jQuery UI autocomplete on the <input id='autocomplete'> by calling autocomplete() method.

Fetch source

Use source option to fetch users name when the key is got pressed. Get the typed value with request.term and pass it in AJAX.

Pass the AJAX response in response() method.

Item Selection

Need to disable the default select functionality because when an option is been selected then the value is been shown on the screen instead of the label if the value is been defined.

Define select option and store the selected item value to <input type='text' id='seluserid' > and set label to autocomplete element.

Completed Code

$( function() {

 // Initialize 
 $( "#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;
  }
 });
});

NOTE – Remove select option if you have not return value key from the AJAX file.


 

7. Demo

Enter the value in the first input box and select value from the suggestion list.


 

8. Conclusion

The autocomplete widget gives suggestions to the user while searching value in the input element.

In the example, I customize the widget selection and store the selection value in the element for further processing.

You can learn more about this plugin from here.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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