JQuery Cool Auto-Suggest

Posted on: 11 June 2011
By: admin

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.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.coolautosuggest.js"></script>

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.

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  submitOnSelect:true
});
</script>

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.


<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-type: application/json");
$host="localhost";
$username="test";
$password="123456";
$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");
if(mysqli_num_rows($result)>0){
    while($data=mysqli_fetch_row($result)){
        // Store data in array 
        // You can add any additional fields to be used by the autosuggest callback function 
        $arr[]=array(
            "id" => $data[0],
            "data" => $data[1],
            "thumbnail" => 'thumbnails/'.$data[3],
            "description" => $data[2],
            // Additional fields (if any)...
        );
    }
}
mysqli_close($con);
// Encode it with JSON format
echo json_encode($arr);
?>

CSS

You can change the auto-suggest list styles by customizing the CSS file located in css/jquery.coolautosuggest.css.

Demo

The complete live demo and how to use this plugin can be seen there.

Download

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

You can download then extract the script manually or install it using npm or bower command.

Using npm:

npm i jquery-coolautosuggest

Using bower:

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.

Tags: