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