Lightweight jQuery Autocomplete & Suggestion Plugin - autoComplete

File Size: 37.4 KB
Views Total: 5173
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Autocomplete & Suggestion Plugin - autoComplete

A tiny, easy and flexible jQuery autocomplete & suggestion plugin with support for cache, term highlighting and Ajax requests.

Basic Usage:

1. Load the jQuery library and the jQuery autoComplete plugin at the end of the web page.

<script src=""></script> 
<script src=""></script> 

2. A list will populate with suggestions while typing a character into the input field.

<input id="demo" type="text" placeholder="Type something">

3. Call the plugin on the input field and set the data source for the autocomplete.

// local data

source: function(term, suggest){
term = term.toLowerCase();
var choices = ['Term 1', 'Term 2', 'Term 3', ...]; // local data
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);

// AJAX requests

source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });

// Optimizing AJAX requests

source: function(term, response){
try { xhr.abort(); } catch(e){}
var xhr = $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });

4. Plugin settings.

  • source: null: A callback function to connect any data source to autoComplete. The callback gets two arguments:
  • minChars: 2: Minimum number of characters (>=1) a user must type before a search is performed.
  • delay: 0: The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay is more responsive, but can produce a lot of load.
  • cache: true: Determines if performed searches should be cached.
  • menuClass: null: Custom class/es that get/s added to the dropdown menu container.
  • renderItem: function (){}: A function that gives you control over how suggestions are displayed.

Change logs:


  • Add click to event for selecting


  • CSS fixed


  • Fixed: Scrolling down and clicking on an item selects the wrong item


  • Fixed if input contains special characters like parentheses then some exceptions occurs


  • Fixed incorrect selection by mouse when suggestions are scrolled down.


  • Ignore additional keystrokes HOME(36), END(35), CTRL(17)


  • second request after selecting an item


  • Minor code improvements and fixes.


  • Made code slightly smaller.


  • Support for focus


  • Firing onSelect callback on enter and passing event and selected suggestion item as additional arguments.
  • Added more complex auto suggest demo.
  • Increased default delay to 150 ms.



  • Minor navigation fix for up/down keys.


  • Fixed renderItem() method.


  • v1.0.4
  • Added renderItem function options allowing custom data passing and autoComplete rendering
  • Improved auto positioning.


  • v1.0.3


  • v1.0.2


  • Fixed auto positioning of suggestions container on init.


This awesome jQuery plugin is developed by Pixabay. For more Advanced Usages, please check the demo page or visit the official website.