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

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.