Simple & Easy jQuery Autocomplete Plugin - Autocompleter

File Size: 137 KB
Views Total: 11365
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple & Easy jQuery Autocomplete Plugin - Autocompleter

Autocompleter is a simple, easy, customizable, cache-enabled jQuery plugin that allows you to select an item from a dropdown list populated with suggestions.

Basic Usage:

1. Include the required jquery.autocompleter.css in the head section of your page.

<link href="jquery.autocompleter.css" rel="stylesheet">

2. Include the jQuery javascript library and jQuery autocompleter plugin at the bottom of your page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.autocompleter.js"></script>

3. Create a text field on the page.

<input type="text" name="nope" id="nope" placeholder="Pick a color" maxlength="40" />

4. Create JSON format data in the javascript.

var colors =
        "hex": "#EFDECD",
        "label": "Almond",
        "rgb": "(239, 222, 205)"
        "hex": "#CD9575",
        "label": "Antique Brass",
        "rgb": "(205, 149, 117)"

4. Call the plugin on the text filed.

$(function () {

    // marker for autocomplete matches
    highlightMatches: true,

    // object to local or url to remote search
    source: colors,

    // show hint
    hint: true,

    // abort source if empty field
    empty: false,

    // max results
    limit: 5,


5. All possible options and callbacks.

  • source: null: URL to server or local object
  • empty: true: Launch if value are empty
  • asLocal: false: Parse remote response as local source
  • minLength: 0: Minimum length for autocompleter
  • limit: 10: Count results to show
  • customClass: []: Array with custom classes for autocompleter element
  • cache: true: Save xhr data to localStorage to avoid repeated requests
  • cacheExpires: 86400: localStorage data lifetime
  • focusOpen: true: Launch autocompleter when input get focus
  • hint: false: Add hint to input with first match label, appropriate styles should be established
  • selectFirst: false: If set true, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect are on
  • changeWhenSelect: true: Change input value when use arrow keys navigation in autocomplete list
  • highlightMatches: false: This option define <strong> tag wrap for matches in autocomplete results
  • ignoredKeyCode: []: Array with ignorable keycodes
  • customLabel: false: Property name in source who will be implemented as label
  • customValue: false: Property name in source who will be implemented as value
  • template: false: Custom template for list items
  • offset: false: Source response offset, for example: response.items.posts
  • combine: $.noop: Returns an object for extend ajax data. Useful if you want to pass on any additional server options
  • callback: $.noop: Select value callback function. Arguments: value, index
  • delay: 0: Few milliseconds to defer the request

6. API methods.

// updates options
$('#input').autocompleter('option', {
  // options

// opens the suggestion list

// closes the suggestion list

// destroys the plugin

// clears all cache



  • v0.7.0: Bugfix


  • v0.6.0


  • Updated dependencies


  • v0.4.0: JS updated


  • v0.3.0: combine property changed


  • v0.1.9.3. add cacheExpires option.
  • add cacheExpires to allowOptions.


  • v0.1.9.2


  • v0.1.8


  • fixed bugs.


  • add delay feature


  • add option minLength


  • fix custom label for local source


  • v0.1.4


  • fixed codestyle
  • add local .json handler
  • add asLocal param


  • add offset option


  • Add open, close, option


  • Add IE8 support


  • fixed: return native form submit when Enter key pressing


  • Add custom template option

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