Performant Typeahead/Autocomplete Plugin - jquery-autocomplete.js

File Size: 11.9 KB
Views Total: 1467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Performant Typeahead/Autocomplete Plugin - jquery-autocomplete.js

A lightweight, flexible, fast jQuery autocomplete/typeahead plugin which automatically suggests matching items while typing keywords (search terms) in a text field.

This plugin enables your users to quickly filter, find, and select items from huge lists such as country lists, user lists, search results and much more.

More features:

  • Keyboard interactions.
  • Allows you to limit the number of results to display.
  • Case sensitive.
  • Auto re-positions the autocomplete dropdown.
  • Highlights keywords in the results.

See also:

Table Of Contents:

How to use it:

1. Include the JavaScript jquery-autocomplete.min.js and Stylesheet jquery-autocomplete.min.css on the webpage.

<!-- CSS -->
<link rel="stylesheet" href="dist/jquery-autocomplete.min.css" />

<!-- JavaScript -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/jquery-autocomplete.min.js"></script>

2. Define an array of items for the autocomplete.

var people = [
        id: 1,
        value: 'Gonzalo Franquini'
        id: 2,
        value: 'Matias Irviti'
        id: 3,
        value: 'Nicolas Molina'
        id: 4,
        value: 'Jemina Mazely'
        id: 5,
        value: 'Gamorra Caramelciano'

3. Attach the plugin to an input field and specify the data source as follows:

<input type="text" id="example">
  value: 'id',
  items: people

4. Full plugin options with default values.


  // max items
  maxItems: 5,

  // properties
  value: 'value',
  text: 'value',

  // class for active items
  itemActiveClass: NAME + '-active',

  // custom template
  itemHighlightTemplate: '<b class="font-weight-bold">$&</b>',

  // selectors
  tagItemsContainer: 'div',
  tagItemsClass: NAME + '-items',
  tagItemsIdSuffix: '-' + NAME + '-list',
  tagItemContainer: 'div',
  tagItemClass: NAME + '-item',

  // is case sensitive?
  caseSensitive: false,

  // close the autocomplete dropdown on click outside
  enableCloseOnClickOutside: true,

  // smart position
  calculatePosition: true,

  // width
  width: null,

  // offsets
  offsetTop: 10,
  offsetLeft: 0


5. API methods.

// set the selected item
$('#example').autocomplete('selected', 1)
$('#example').autocomplete('selected', 'Gonzalo Franquini')
$('#example').autocomplete('selected', {id: 1})
$('#example').autocomplete('selected', {value: 'Gonzalo Franquini'})
$('#example').autocomplete('selected', {id: 1, value: 'Gonzalo Franquini'})

// clear the selected item

// close the autocomplete dropdown

// close all autocomplete dropdowns

// destroy the plugin

// get the selected item

// get the selected item value

// get the selected item text

6. Events.

$('#example').on('selected.autocomplete', function () {
  // fired after an item is selected

$('#example').on('clean.autocomplete', function () {
  // fired after the selected item is cleared

$('#example').on('closed.autocomplete', function () {
  // fired after the autocomplete dropdown is closed

$('#example').on('destroy.autocomplete', function () {
  // fired after the autocomplete is destroyed

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