Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

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">

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.

("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-type: application/json");



$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[0],
"data" => $data[1],
"thumbnail" => 'thumbnails/'.$data[3],
"description" => $data[2],
// Additional fields (if any)...


// Encode it with JSON format
echo json_encode($arr);

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

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.


I downloaded this plugin and it already had this encodeURI modification, but it's wrong. It needs to use encodeURIComponent(). We are encoding a URI component after all. For example, encodeURI() does not encode things that need to be encoded for a URI component. Using CodeIgniter, that is unacceptable.

I have replaced php call with java servlet call and trying to form json object, something like this
[{"id" : 1, "data" : "London"} , {"id" : 2, "data" : "Munich"}]
but getting no output.
Can you please suggest what is correct synatx required for JSON

@Victor: I think your JSON format is already correct. Maybe there is another cause. Did you get error message?

You can solve the problem with the empty POST variable by changing the following code in jquery.coolautosuggest.js





Firstly, many thanks for creating and sharing this plugin. I've tried several jQuery autosuggest plugins, but this one is the fastest and smallest in size. Perfect.

I don't know whether you continue to work on it, but I would really like to see the feature where the function is fired again after you select 1 result separated by comma.
Eg. I start typing something, get a list of results, select 1 result which is copied into input field, then add a comma and start typing again - and the plugin gives suggestions again.

Do you mean it's like a tagging? Well, I have a script like that but it's still incomplete. I will see if I can add that functionality to this plugin.

yes, yes, yesssss! That's real cool! I've spent few hours to implement a autosuggestion plug-in and finally i've found it.
Manu thanks to do this fine work! You save my live! :-)
Good job!

Great information... Thanks so much for writing all of the excellent information!

ar condicionado automotivo

I am trying to do an onchange event to run a other ajax request but I am not sure if that work or if this even allowed...

$("#CustomerLocationId").val(result.id); // Get the ID field
$("#CustomerId").val(result.customerid); // Get the description
$("#CustomerLocationId").val(""); // Empty the ID field
$("#CustomerId").val(""); // Empty the description

can i inject a javascript function like : " onchange(getcustomeruser(CustomerId.value) " ??

ps love the functionality just not that familiar with jquery.... keep up the good work!!

How to implement multiple values using this? Just like http://jqueryui.com/autocomplete/#multiple-remote


Hi There, i've found and try to implemented this autosuggest in my dev site, but i've a little problem, i can't get the right data while URL for retreiveiw data is based on other selectbox / optionbox, while i change the value on checkbox the result always as save as the first value of selected selectbox value.

url:"ajax.php?qm=suggest&Unit=" + $("#Unit").val() + "&JK=" + $("#JK").val() + "&Nama=",

when i change the value of selectbox Unit or JK, the URL request will still same as the first value :(

Please suggest me on how to fix this !

Its works great in my first installation. You have answered everything in your blog like steps to install, customization and even PHP Code. So almost it answered everything for a general user especially to me.

Thank you for your plugin & work.

Possible to limit size of dropdown to certain length, i.e, scrollable dropdown?
Also, can the dropdown be triggered onFocus. after writing "a", and clicking someplace else, when the input is focused back, the dropdown should show with the matching terms.


TThe information of the article proved very much helpful for me as this is very easy to use. his PHP download script has many features like the increased configurable speed and stress balls resumable download capability is also very high in this.

i want send the id-field to the search.php, but i have no idea how to get the id variable name.
i don't know how to get the variables id, discription, profession and picture.
Please can you help me?

I want to send the varibles like this:

Thanks and sorry for my bad english :-)


Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.