JQuery Cool Auto-Suggest
This is the page for release updates of my jQuery Cool Auto-Suggest plugin. This new version still has the compatible features from the older one. The features are :
- Supports for ID field.
- Supports image thumbnail and description
- Supports form submission on click.
- Callback function when item is selected.
- Error callback function for custom error message.
- Able to pass additional request parameters based on other input's value.
- Compatible on various screen sizes and mobile devices.
- Supports for default template overriding.
- How To Use
The basic way of using this plugin did not changed from the previous version. First, include jQuery and this plugins inside the <head> tag.
Also include this CSS file for styling the suggestions.
<link rel="stylesheet" type="text/css" href="css/jquery.coolautosuggest.css" />
Prepare the textbox.
<input type="text" id="text1" name="text1" />
And finally, initialize the cool auto-suggest textfield. There are some options in this example.
If the showThumbnail option is set to true, it will display image thumbnail on every suggestion item. The showDescription option will show description text on every suggestion item when it is set to true. And, when the submitOnSelect option set to true, the form (if you have one) will be submitted once you click one of the suggestion items.
More complete documentation can be read at the demo page.
- Server Side Script
We need the server side script to provide the data for this auto-suggest. The server side code below is writen in PHP. Of course you can use other languages as long as they can output the JSON format.
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-type: application/json"); $host="localhost";
$database="test"; $con=mysqli_connect($host,$username,$password,$database); $arr=array();
$result=mysqli_query($con,"SELECT * FROM people WHERE name LIKE '%".mysqli_real_escape_string($con,$_GET['chars'])."%' ORDER BY name LIMIT 0, 10");
// Store data in array
// You can add any additional fields to be used by the autosuggest callback function
"id" => $data,
"data" => $data,
"thumbnail" => 'thumbnails/'.$data,
"description" => $data,
// Additional fields (if any)...
} mysqli_close($con); // Encode it with JSON format
You can change the auto-suggest list styles by customizing the CSS file located in css/jquery.coolautosuggest.css.
The complete live demo and how to use this plugin can be seen there.
The current version is 2.4.0 which has new feature for default template overriding and some improvement in examples. The full source code and example can be downloaded from https://github.com/w3shaman/jquery-coolautosuggest/releases/tag/2.4.0.
- Installation Using npm or bower
npm i jquery-coolautosuggest
bower install jquery-coolautosuggest
You might have been searching a jQuery plugin which can pull one record from database and display the fields on some input elements. My jQuery FetchRow plugin might be the solution.