Version 1.4 glow.widgets.AutoSuggest
API Quick Reference
JavaScript is required to use the quick reference
Create an auto-suggest menu for an input element.
An AutoSuggest widget adds the ability for a text input element to make suggestions whilst the user types. This appears as a list of selectable items below the input element which dynamically updates based on what has been typed so far.
Further Info & Examples
Constructor
new glow.widgets.AutoSuggest(inputElement, dataSource, opts)Parameters
- inputElement
- Type
- NodeList | String
A NodeList or css selector that points to a text input element.
- dataSource
Either an array of objects, an array of strings (referred to as a 'dataSource'), a function that returns a dataSource or a URL that when requested will return a dataSource.
- opts
- Type
- Object
Optional configuration settings.
- activeOnShow
Should the first suggestion automatically be active when the suggestion list appears?
- Type
- Boolean
- Default
- true
- Optional
- Yes
- anim
Passed into the Overlay constructor for show and hide transitions.
- caseSensitive
Whether case is important when matching suggestions.
- Type
- Boolean
- Default
- false
- Optional
- Yes
- complete
Append the completed text of the currently active suggestion to the input text.
- Type
- Boolean
- Default
- false
- Optional
- Yes
- delim
When defined, the input text will be treated as multiple values, separated by this string (with surrounding spaces ignored).
- Type
- String
- Optional
- Yes
- formatItem
Given the matched data item, return HTML or NodeList.
- Type
- Function
- Optional
- Yes
- height
Height in pixels of the suggestion container.
- Type
- Number
- Optional
- Yes
- index
When datasource is an array of objects, the property with this string is used as the index, or this function will be used to generate the index.
- isMatch
Given the current input value and an index item, return true|false to indicate if a match has been made.
- Type
- Function
- Optional
- Yes
- maxListLength
Limit the size of the result list to this.
- Type
- Number
- Optional
- Yes
- onDataAbort
Your own handler for the dataAbort event.
- Type
- Function
- Optional
- Yes
- onDataError
Your own handler for the dataError event.
- Type
- Function
- Optional
- Yes
- onDataLoad
Your own handler for the dataLoad event.
- Type
- Function
- Optional
- Yes
- onInputChange
Your own handler for the inputChange event.
- Type
- Function
- Optional
- Yes
- onItemSelect
Your own handler for the itemSelect event.
- Type
- Function
- Optional
- Yes
- parseData
Transform raw text returned from AJAX into a dataSource object.
- Type
- Function
- Optional
- Yes
- theme
Either "light" or "dark".
- Type
- string
- Default
- "light"
- Optional
- Yes
- width
Width in pixels of the suggestion container. Default is the width of the inputElement.
- Type
- Number
- Default
- inputElement width
- Optional
- Yes
Properties
- inputElement
Refers to the input element to which this is attached to.
- Type
- NodeList
- overlay
Refers to the overlay object that will contain the list of suggestions.
- Type
- NodeList
Methods
- loadData
Cause the dataSource passed to the the constructor to be set as the current data.
Synopsis
myAutoSuggest.loadData();Returns
The instance of the widget.
- setData
Cause dataSource to be indexed.
- val
Sets or gets the value of the input element (minus any
Synopsis
myAutoSuggest.val(value);Parameters
- value
- Type
- string
- Optional
- Yes
If defined this value is set, otherwise the current value is returned.
Returns
The value of the input element when getting, or the instance of the widget when setting.
Description
unaccepted completions).
Events
- inputChange
Fired whenever new suggestion appears based on changed input.
Synopsis
glow.events.addListener(myAutoSuggest, "inputChange", function(event) { // ... });Arguments
- event
- itemSelect
Fired whenever a suggestion is selected.
Synopsis
glow.events.addListener(myAutoSuggest, "itemSelect", function(event) { // ... });Arguments
- event
Description
The event object argument for this handler has the following property: selectedItem - the object in the dataSource that is associated with the selected list item.
- dataLoad
Fired whenever raw data is loaded from a request to a URL.
Synopsis
glow.events.addListener(myAutoSuggest, "dataLoad", function(event) { // ... });Arguments
- event
- dataError
Fired whenever there is an errored request to a URL.
Synopsis
glow.events.addListener(myAutoSuggest, "dataError", function(event) { // ... });Arguments
- event
- dataAbort
Fired whenever there is an aborted request to a URL.
Synopsis
glow.events.addListener(myAutoSuggest, "dataAbort", function(event) { // ... });Arguments
- event
