Simple & Easy jQuery Autocomplete Plugin - Autocompleter

File Size: 137 KB
Views Total: 11192
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 () {
  $('#nope').autocompleter({

    // 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
$('#input').autocompleter('open');

// closes the suggestion list
$('#input').autocompleter('close');

// destroys the plugin
$('#input').autocompleter('destroy');

// clears all cache
$.autocompleter('clearCache');

Changelog:

2022-10-09

  • v0.7.0: Bugfix

2022-04-06

  • v0.6.0

2022-04-05

  • Updated dependencies

2020-01-05

  • v0.4.0: JS updated

2018-03-09

  • v0.3.0: combine property changed

2015-01-22

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

2015-01-21

  • v0.1.9.2

2014-12-01

  • v0.1.8

2014-11-26

  • fixed bugs.

2014-11-23

  • add delay feature

2014-09-13

  • add option minLength

2014-06-17

  • fix custom label for local source

2014-06-11

  • v0.1.4

2014-06-08

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

2014-05-24

  • add offset option

2014-05-21

  • Add open, close, option

2014-05-19

  • Add IE8 support

2014-05-18

  • fixed: return native form submit when Enter key pressing

2014-05-17

  • 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.