Version 1.2 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 |
A NodeList or css selector that points to a text input element.
- dataSource
-
- Type
- | | |
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
Optional configuration settings.
- activeOnShow
-
Should the first suggestion automatically be active when the suggestion list appears?
- Type
- Default
- true
- Optional
- Yes
- anim
-
Passed into the Overlay constructor for show and hide transitions.
- Type
- |
- Optional
- Yes
- caseSensitive
-
Whether case is important when matching suggestions.
- Type
- Default
- false
- Optional
- Yes
- complete
-
Append the completed text of the currently active suggestion to the input text.
- Type
- 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
- Optional
- Yes
- formatItem
-
Given the matched data item, return HTML or NodeList.
- Type
- Optional
- Yes
- height
-
Height in pixels of the suggestion container.
- Type
- 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.
- Type
- |
- Default
- ["name"]
- Optional
- Yes
- isMatch
-
Given the current input value and an index item, return true|false to indicate if a match has been made.
- Type
- Optional
- Yes
- maxListLength
-
Limit the size of the result list to this.
- Type
- Optional
- Yes
- onDataAbort
-
Your own handler for the dataAbort event.
- Type
- Optional
- Yes
- onDataError
-
Your own handler for the dataError event.
- Type
- Optional
- Yes
- onDataLoad
-
Your own handler for the dataLoad event.
- Type
- Optional
- Yes
- onInputChange
-
Your own handler for the inputChange event.
- Type
- Optional
- Yes
- onItemSelect
-
Your own handler for the itemSelect event.
- Type
- Optional
- Yes
- parseData
-
Transform raw text returned from AJAX into a dataSource object.
- Type
- 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
- 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.
Synopsis
myAutoSuggest.setData(dataSource);Parameters
- dataSource
-
- Type
- | |
Set this.dataSource to this if it is defined.
Returns
The instance of the widget.
Description
If the dataSource is a URL it will be reloaded asynchronously.
- 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
-
- Type
- glow.events.Event
- itemSelect
-
Fired whenever a suggestion is selected.
Synopsis
glow.events.addListener(myAutoSuggest, "itemSelect", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.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
-
- Type
- glow.events.Event
- dataError
-
Fired whenever there is an errored request to a URL.
Synopsis
glow.events.addListener(myAutoSuggest, "dataError", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
- dataAbort
-
Fired whenever there is an aborted request to a URL.
Synopsis
glow.events.addListener(myAutoSuggest, "dataAbort", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
