materialize-autocomplete

Materialize-css styled autocomplete, examples: https://icefox0801.github.io/materialize-autocomplete/examples/

Install

+ npm
``sh
$ npm install materialize-autocomplete
`
+ bower
`sh
$ bower install materialize-autocomplete
`

Usage

!autocomplete
+ When typing inside an input, autocomplete prompts will show on dropdown list
+ Choosing an option by click or ↑, ↓, Enter keys
+ Removing a selection by click x when enable multiple selection

`javascript
var autocomplete =$('#el').autocomplete({
limit: 20,
multiple: {
enable: true,
maxSize: 10,
onExist: function (item) { / ... / },
onExceed: function (maxSize, item) { / ... / }
},
appender: {
el: '#someEl'
},
getData: function (value, callback) {
// ...
callback(value, data);
}
});
`

$.fn.materialize_autocomplete


+ $.fn.materialize_autocomplete(options) [function]: Initialize an autocomplete widget and return an Autocomplete instance

Autocomplete options

+ cacheable [boolean]: Dropdown data cacheable or not, default: true
+ limit [number]: Max number of items show in dropdown, default: 10
+ multiple [object]: Configuration of multiple selection, seeing properties of multiple for more details
+ hidden [object]: Configuration of hidden input (used for storing ids joined by selections or id of a selection), seeing properties of hidden for more details
+ appender [object]: Configuration of appender (where to append selections when multiple selection is enabled), seeing properties of appender for more details
+ dropdown [object]: Configuration of dropdown, seeing properties of dropdown for more details
+ onSelect(item) [function]: Callback function after selecting an item in single selection mode
+ getData(value, callback) [function]: Function for getting dropdown list data, asynchronous called with a callback
+ value [string]: Input value，when input event triggered, getData will be called with input value
+ callback(value, data) [function]: Callback function
+ value [string]: Same as value above
+ data [array]: Data array，should be formatted as [{ 'id': '1', 'text': 'a' }, { 'id': '2', 'text': 'b'}]
+ ignoreCase [boolean]: Ignore case or not, default: true
+ throttling [boolean]: Throttling for getData function or not, default: true

Autocomplete

$3

+ new Autocomplete(el, options) [function]: Constructor
+ el [string|object]: DOM element on which the widget applys
+ options [object]: Configuration of the widget

$3

+ autocomplete.options [object]: Configuration object
+ autocomplete.$el [object]: JQuery object on which the widget applys
+ autocomplete.$wrapper [object]: Wrapper jQuery object，equal to autocomplete.$el.parent()
+ autocomplete.compiled [object]: Compiling functions for tagTemplate and itemTemplate
+ autocomplete.$dropdown [object]: JQuery object of dropdown
+ autocomplete.$appender [object]: JQuery object of appender
+ autocomplete.$hidden [object]: JQuery object of hidden input
+ autocomplete.resultCache [object]: Result cache object of getData when cacheable is true
+ autocomplete.value [array]: Value of widget, when multiple selection is enabled, autocomplete.value is ids joined by selections, otherswise autocomplete.value is id of a selection

$3

+ autocomplete.initialize() [function]: Initializing method
+ autocomplete.render() [function]: Rendering method
+ autocomplete.setValue(item) [function]: Value setting method
+ item [object]: Selection object, e.g. { id: '1', text: 'a'}
+ autocomplete.append(item) [function]: Appending an selection, called when options.multiple.enable is true
+ autocomplete.remove(item) [function]: Removing an selection, called when options.multiple.enable is true
+ autocomplete.select(item) [function]: Setting the value, called when options.multiple.enable is false

Detailed options

$3

|property|description|default|
|:---|:---|:---|
|enable [boolean]|Enabled or not|false|
|maxSize [number]|Max number of selections|4|
|onExist [function]|Callback when selection to append exists||
|onExceed [function]|Callback when selections exceed maxSize||
|onAppend [function]|Callback after appending a selection||
|onRemove [function]|Callback after removing a selection||

$3

|property|description|default|
|:---|:---|:---|
|enable [boolean]|Enabled or not|false|
|el [string|object]|Applying an existing DOM element if not null, otherwise created one|''|
|inputName [string]|name attribute of hidden input|''|
|required [boolean]|required attribute of hidden input|false|

$3

|property|description|default|
|:---|:---|:---|
|el [string|object]|Applying an existing DOM element if not null, otherwise created one|''|
|tagName [string]|TagName of appender when appender.el is null|ul|
|className [string]|ClassName attribute of appender|ac-appender|
|tagTemplate [string]|Template string of selections inside appender||
Note that tagTemplate should use undescore template semantic, data-id and data-text attributes should be specified on outest DOM

$3

|property|description|default|
|:---|:---|:---|
|el [string|object]|Applying an existing DOM element if not null, otherwise created one|''|
|tagName [string]|TagName of dropdown when dropdown.el is null|ul|
|className [string]|ClassName attribute of dropdown|ac-dropdown|
|itemTemplate [string]|Template string of items inside dropdown||
|noItem [string]|Prompt for no data|''|
Note that itemTemplate should use undescore template, data-id and data-text` attributes should be specified on outest DOM