materialize-autocomplete

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

Install

$ npm install materialize-autocomplete
$ bower install materialize-autocomplete

Usage

autocomplete

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

Autocomplete options

Autocomplete

Constructor

Instance property:

Instance methods:

Detailed options

Properties of multiple

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

Properties of hidden

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

Properties of appender

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

Properties of dropdown

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