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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.auto-complete.js"></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

$(function(){
$('#demo').autoComplete({
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]);
suggest(suggestions);
}
});
});

// AJAX requests

$('input[name="q"]').autoComplete({
source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});

// Optimizing AJAX requests

$('input[name="q"]').autoComplete({
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:

2016-03-15

• Add click to event for selecting

2015-10-29

• CSS fixed

2015-10-16

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

2015-08-17

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

2015-08-16

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

2015-07-31

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

2015-06-09

• second request after selecting an item

2015-05-02

• Minor code improvements and fixes.

2015-05-01

• Made code slightly smaller.

2015-04-30

• Support for focus

2015-04-23

• 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.

2015-04-15

• JS update.

2014-12-15

• Minor navigation fix for up/down keys.

2014-12-08

• Fixed renderItem() method.

2014-11-26

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

2014-11-18

• v1.0.3

2014-09-14

• v1.0.2

2014-08-10

• 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.