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 to the input element. Navigate to the suggestion list either by mouse or keyboard arrow keys.
It has the various options that allow customizing 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 this tutorial, I show how you can add jQuery UI autocomplete on the textbox and select single or multiple values from the suggestion list.
On the basis of POST search value fetch records from the
Completed Code
In the example, I customize the widget selection and store the selection
You can learn more about this plugin from here.
If you found this tutorial helpful then don't forget to share.
It has the various options that allow customizing 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 this tutorial, I show how you can add jQuery UI autocomplete on the textbox and select single or multiple values from the suggestion list.
1. Table structure
I am usingusers table in the 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;
2. Configuration
Create a newconfig.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
Created 4 input boxes –- The first textbox to add autocomplete widget.
- The second is used to show selected user id from the suggestions list.
- The third textbox to add multiple autocomplete.
- The forth textbox to show selected multiple user ids.
<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>
5. PHP
Create a newfetchData.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 $row['id'] in value key and $row['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 – Removevaluekey 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
Create 2 functions<input id='autocomplete'> and <input id='multi_autocomplete'> by calling autocomplete() method.- split() – Return an array by splitting the value.
- extractLast() – Select the last value from array.
Single Selection
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.
Multiple Selection
Get the last input value from the input box using
Item SelectionextractLast() function and send AJAX request to fetch records.
Single 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.
Multiple Selection
Split the input box values and remove last value. Push
ui.item.label and assign in the $('#multi_autocomplete').
Similarly, add
Completed Codeui.item.value in $('#selectuser_ids').$( 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();
}
NOTE – Remove
select option if you have not return value key from the AJAX file.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.
If you found this tutorial helpful then don't forget to share.
