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:

• Best Autocomplete & Typeahead Plugins 

Table Of Contents:

• Basic usage
• Options
• API methods
• Events

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

$('#example').autocomplete({
  value: 'id',
  items: people
})

4. Full plugin options with default values.

$('#example').autocomplete({

  // 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
$('#example').autocomplete('clean');

// close the autocomplete dropdown
$('#example').autocomplete('close');

// close all autocomplete dropdowns
$('#example').autocomplete('closeAll');

// destroy the plugin
$('#example').autocomplete('destroy');

// get the selected item
$('#example').data('autocomplete').selected();

// get the selected item value
$('#example').data('autocomplete').value();

// get the selected item text
$('#example').data('autocomplete').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.