Submit your widget

jquery-autocompleter - Simple, easy, customisable and with cache support.

Created 5 years ago   Views 1693   downloads 799    Author artemfitiskin
View DemoDownload
Share |

jQuery Autocompleter :octocat:

Here: Example with Crayola colors.

Use bower install Autocompleter command.

Minimum requirements: jquery.autocompleter.css and jquery.autocompleter.min.js.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.autocompleter.css">
$(function () {
    $('input').autocompleter({ source: 'path/to/get_data_request' });

or for local JSON source:

var data = [
    { "value": "1", "label": "one" },
    { "value": "2", "label": "two" },
    { "value": "3", "label": "three" }
$(function () {
    $('input').autocompleter({ source: data });

If you will not define a value in source object, label will be used as a default value in input field after select.

Autocompleter has the following options:

sourcestr, objURL to the server or a local objectnull
asLocalboolParse remote response as local sourcefalse
emptyboolLaunch if value is emptytrue
limitintNumber of results to be displayed10
minLengthintMinimum length for autocompleter0
delayintFew milliseconds to defer the request0
customClassarrayArray with custom classes for autocompleter element[]
cacheboolSave xhr data to localStorage to avoid the repetition of requeststrue
focusOpenboolLaunch autocompleter when input gets focustrue
hintboolAdd hint to input with first matched label, correct styles should be installedfalse
selectFirstboolIf set to true, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect is onfalse
changeWhenSelectboolAllows to change input value using arrow keys navigation in autocomplete listtrue
highlightMatchesboolThis option defines <strong> tag wrap for matches in autocomplete resultsfalse
ignoredKeyCodearrayArray with ignorable keycodes, by default: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145[]
customLabelstrThe name of object's property which will be used as a labelfalse
customValuestrThe name of object's property which will be used as a valuefalse
templatestrCustom template for list items. For example: <span>{{ label }} is {{ customPropertyFromSource }}</span>. Template appends to .autocompleter-item.false
offsetstrSource response offset, for example: response.items.postsfalse
combinefunctionReturns an object which extends ajax data. Useful if you want to pass some additional server options$.noop
callbackfunctionSelect value callback function. Arguments: value, index$.noop
$('#input').autocompleter('option', data);

For example:

$('#input').autocompleter('option', {
    limit: 5,
    template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
$.autocompleter('defaults', {
    customClass: 'myClassForAutocompleter'

Autocompleter for the first name input with caching, match highlighting and 5 results limit. Remote response depends on a gender:

<label for="gender_male">Male</label>
<input type="radio" name="gender" value="male" id="gender_male" checked="checked" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" value="female" id="gender_female" />
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" />
$(function () {
        limit: 5,
        cache: true,
        combinefunction () {
            var gender = $("input:radio[name=gender]:checked").val();
            return {
                gender: gender
        callbackfunction (valueindex) {
            console.log( "Value "+value+" are selected (with index "+index+")." );

Simple 3-level: div (node) -> ul (list) -> li (item).

<div class="autocompleter" id="autocompleter-1">
    <ul class="autocompleter-list">
        <li class="autocompleter-item">First</li>
        <li class="autocompleter-item">Last</li>