SimpleAutocomplete/en

Simple autocomplete for text inputs, with the support for multiple selection.

Last update: 2014-09-04.

Usage

Include hinter.js and hinter.css on your page. Then write:

var hint = new SimpleAutocomplete(input, dataLoader, params);

Parameters:

input

The input, either id or DOM element reference (the input must have an id anyway).

dataLoader(hint, value[, more])

Callback which should load autocomplete options and then call hint.replaceItems(newOptions, append);, where

newOptions

[ [ name, value, disabled, checked ] ], [ name, value ], ... ]

name

HTML option name

value

plaintext option value

disabled

only meaningful when multipleListener is set

checked

only meaningful when multipleListener is set

append

'more' parameter should be passed here

Callback parameters:

hint

This SimpleAutocomplete object

value

The string guess should be done based on

more

The 'page' of autocomplete options to load, 0 = first page. See also moreMarker option below.

Optional constructor parameters are passed as keys of the 'params' object:

multipleDelimiter

Pass a delimiter string (for example ',' or ';') to enable multiple selection. Item values cannot have leading or trailing whitespace. Input value will consist of selected item values separated by this delimiter plus single space. dataLoader should handle it's 'value' parameter accordingly in this case, because it will be just the raw value of the input, probably with incomplete item or items, typed by the user.

multipleListener(hint, index, item)

If you don't want to touch the input value, but want to use multi-select for your own purposes, specify a callback that will handle item clicks here. Also you can disable and check/uncheck items during loading in this mode.

onChangeListener(hint, index)

Callback which is called when input value is changed using this dropdown. index is the number of element which selection is changed, starting with 0. It must be used instead of normal 'onchange' event.

emptyText

Text to show when dataLoader returns no options. Empty (default) means 'hide hint'.

prompt: HTML text to be displayed before a non-empty option list. Empty by default.

delay

If this is set to a non-zero value, the autocompleter does no more than 1 request in each delay milliseconds.

moreMarker

The server supplying hint options usually limits their count. But it's not always convenient having to type additional characters to narrow down the selection. Optionally you can supply additional item with special value equal to moreMarker value or '#MORE' at the end of the list, and SimpleAutocomplete will issue another request to dataLoader with incremented 'more' parameter when it will be clicked. You can also set moreMarker to false to disable this feature.

When you don't need SimpleAutocomplete instance any more, you can destroy it with:

hint.remove();
hint = null;

Demo

Just autocomplete:

Multiselect with prompt:

Side-effect multiselect: