SimpleAutocomplete/en

Материал из YourcmcWiki
Перейти к: навигация, поиск

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)
Callback which should load autocomplete options and then call hint.replaceItems([ [ name, value ], [ name, value ], ... ]). 'hint' parameter will be this autocompleter object, and the guess should be done based on 'value' parameter (string).

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.
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.
maxHeight
Maximum hint dropdown height in pixels
emptyText
Text to show when dataLoader returns no options. If emptyText === false, the hint will be hidden instead of showing text.
allowHTML
If true, HTML code will be allowed in option names.
promptHTML
HTML code to be always displayed before the option list when it's not empty.

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

hint.remove();
hint = null;

Demo:

Simple: Multiselect: