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

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">
$('#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.