1.0.7 • Published 8 years ago
materialize-autocomplete v1.0.7
materialize-autocomplete
Materialize-css styled autocomplete, examples: https://icefox0801.github.io/materialize-autocomplete/examples/
Install
- npm
$ npm install materialize-autocomplete
- bower
$ bower install materialize-autocomplete
Usage
- 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
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 anautocomplete
widget and return anAutocomplete
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 detailshidden [object]
: Configuration of hidden input (used for storing ids joined by selections or id of a selection), seeing properties of hidden for more detailsappender [object]
: Configuration of appender (where to append selections when multiple selection is enabled), seeing properties of appender for more detailsdropdown [object]
: Configuration of dropdown, seeing properties of dropdown for more detailsonSelect(item) [function]
: Callback function after selecting an item in single selection modegetData(value, callback) [function]
: Function for getting dropdown list data, asynchronous called with acallback
value [string]
: Input value,wheninput
event triggered,getData
will be called with input valuecallback(value, data) [function]
: Callback functionvalue [string]
: Same asvalue
abovedata [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 forgetData
function or not, default:true
Autocomplete
Constructor
new Autocomplete(el, options) [function]
: Constructorel [string|object]
: DOM element on which the widget applysoptions [object]
: Configuration of the widget
Instance property:
autocomplete.options [object]
: Configuration objectautocomplete.$el [object]
: JQuery object on which the widget applysautocomplete.$wrapper [object]
: Wrapper jQuery object,equal toautocomplete.$el.parent()
autocomplete.compiled [object]
: Compiling functions fortagTemplate
anditemTemplate
autocomplete.$dropdown [object]
: JQuery object of dropdownautocomplete.$appender [object]
: JQuery object of appenderautocomplete.$hidden [object]
: JQuery object of hidden inputautocomplete.resultCache [object]
: Result cache object ofgetData
whencacheable
istrue
autocomplete.value [array]
: Value of widget, when multiple selection is enabled,autocomplete.value
is ids joined by selections, otherswiseautocomplete.value
is id of a selection
Instance methods:
autocomplete.initialize() [function]
: Initializing methodautocomplete.render() [function]
: Rendering methodautocomplete.setValue(item) [function]
: Value setting methoditem [object]
: Selection object, e.g.{ id: '1', text: 'a'}
autocomplete.append(item) [function]
: Appending an selection, called whenoptions.multiple.enable
istrue
autocomplete.remove(item) [function]
: Removing an selection, called whenoptions.multiple.enable
istrue
autocomplete.select(item) [function]
: Setting the value, called whenoptions.multiple.enable
isfalse
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