AutoComplete Class
Alias for <a href="AutoCompleteList.html">AutoCompleteList</a>. See that class
for API docs.
Constructor
AutoComplete
-
config
Parameters:
-
configObjectObject literal specifying widget configuration properties.
Index
Methods
- _clearInterval
- _clearSelection
- _createDataSource
- _enableIntervalDetection
- _extractQuery
- _focus
- _jumpSelection
- _moveSelection
- _onButtonMouseDown
- _onContainerClick
- _onContainerMouseout
- _onContainerMouseover
- _onContainerScroll
- _onInterval
- _onTextboxBlur
- _onTextboxFocus
- _onTextboxKeyDown
- _onTextboxKeyPress
- _onTextboxKeyUp
- _populateList
- _realignContainer
- _renderInput
- _renderListElements
- _renderOverlay
- _selectItem
- _sendQuery
- _textMatchesOption
- _toggleContainer
- _toggleHighlight
- _typeAhead
- _updateValue
- bindUI
- destructor
- doBeforeExpandContainer
- doBeforeLoadData
- filterResults
- formatResult
- generateRequest
- handleResponse
- initializer
- renderUI
- sendQuery
- syncUI
Properties
- AutoComplete.ATTRS static
- AutoComplete.NAME static
Attributes
- alwaysShowContainer
- applyLocalFilter
- autoHighlight
- button
- dataSource
- dataSourceType
- delimChar
- forceSelection
- input
- matchKey
- maxResultsDisplayed
- minQueryLength
- queryDelay
- queryInterval
- queryMatchCase
- queryMatchContains
- queryQuestionMark
- schema
- schemaType
- suppressInputUpdate
- typeAhead
- typeAheadDelay
- uniqueName
Methods
_clearInterval
()
private
Clears the query interval
_clearSelection
()
protected
When <a href="Autocomplete.html#config_forceSelection">forceSelection</a> is true and the user tries to leave the input element without selecting an item from the results, the user selection is cleared.
_createDataSource
()
String
protected
Creates the data source object using the passed in <a href="Autocomplete.html#config_dataSource">dataSource</a>, and if it is a string, will use the <a href="Autocomplete.html#config_dataSourceType">dataSourceType</a> to create a new <a href="module_datasource.html">DataSource</a> object.
Returns:
_enableIntervalDetection
()
protected
Enables query interval detection for IME support.
_extractQuery
-
query
Extracts the right most query from the delimited string in the input.
Parameters:
-
queryStringString to parse
Returns:
_focus
()
protected
Focuses the input element.
_jumpSelection
()
protected
If there is a currently selected item, the right arrow key will select that item and jump to the end of the input element, otherwise the container is closed.
_moveSelection
-
keyCode
Triggered by the up and down arrow keys, changes the currently selected list element item, and scrolls the container if necessary.
Parameters:
-
keyCodeNumberThe numeric code of the key pressed
_onButtonMouseDown
-
event
Called when the user mouses down on the button element in the combobox.
Parameters:
-
eventEventFacade
_onContainerClick
-
event
Handles when a user clicks on the container.
Parameters:
-
eventEventFacade
_onContainerMouseout
-
event
Handles when a user mouses out of the container.
Parameters:
-
eventEventFacade
_onContainerMouseover
-
event
Handles when a user mouses over the container.
Parameters:
-
eventEventFacade
_onContainerScroll
-
event
Handles the container scroll events.
Parameters:
-
eventEventFacade
_onInterval
()
protected
Enables the query to be triggered based on detecting text input via intervals instead of via key events.
_onTextboxBlur
-
event
Handles the input element losing focus.
Parameters:
-
eventEventFacade
_onTextboxFocus
-
event
Handles the input element gaining focus.
Parameters:
-
eventEventFacade
_onTextboxKeyDown
-
event
Handles the keydown events on the input element for functional keys.
Parameters:
-
eventEventFacade
_onTextboxKeyPress
-
event
Handles the key press events of the input element.
Parameters:
-
eventEventFacade
_onTextboxKeyUp
-
event
Handles the keyup events of the input element.
Parameters:
-
eventEventFacade
_populateList
-
event
Populates the container with list items of the query results.
Parameters:
-
eventEventFacade
_realignContainer
-
event
Realigns the container to the input element.
Parameters:
-
eventEventFacade
_renderInput
()
protected
Handles the rendering of the input element.
_renderListElements
()
protected
Pre-populates the container with the <a href="Autocomplete.html#config_maxResultsDisplayed">maxResultsDisplayed</a> number of list items.
_renderOverlay
()
protected
Handles the creation of the overlay where the result list will be displayed.
_selectItem
-
elListItem
Selects a list item from the query results.
Parameters:
-
elListItemNodeThe list item to select
_sendQuery
-
query
Makes a query request to the data source.
Parameters:
-
queryStringThe query string
_textMatchesOption
()
protected
Checks to see if the value typed by the user matches any of the query results.
_toggleContainer
-
show
Toggles the display of the results container.
Parameters:
-
showBooleanFlag to force the showing or hiding of the container
_toggleHighlight
-
elNewListItem -
action
Toggles the highlighting of a list item, and removes the highlighting from the previous item
Parameters:
-
elNewListItemNodeThe item to be highlighted
-
actionStringWhether we are moving to or from an item. Valid values are "to" or "from".
_typeAhead
-
elListItem -
query
Updates in the input element with the first result as the user types, selecting the text the user has not typed yet.
Parameters:
-
elListItemNodeThe selected list item
-
queryStringThe query string
_updateValue
-
elListItem
Updates the input element with the selected query result. If <a href="Autocomplete.html#config_delimChar">delimChar</a> has been set, then the value gets appended with the delimiter.
Parameters:
-
elListItemNodeThe selected list item
bindUI
()
protected
Bind the events on the AutoComplete UI. Lifecycle.
destructor
()
protected
Destructor lifecycle implementation for the Autocomplete class. Purges events attached to the node (and all child nodes).
doBeforeExpandContainer
-
query -
allResults
An overridable method that is executed before the result container is shown. The method can return false to prevent the container from being shown.
Parameters:
-
queryStringThe query that was submitted to the data source
-
allResultsObjectThe parsed results
Returns:
doBeforeLoadData
-
event
An overridable method that is executed before the result overlay is loaded with results.
Parameters:
-
eventEventFacade
Returns:
filterResults
-
event
Executed by the data source as a mechanism to do simple client-side filtering of the results.
Parameters:
-
eventEventFacade
Returns:
Filtered response object
formatResult
-
result -
request -
resultMatch
An overridable method for formatting the result of the query before it's displayed in the overlay.
Parameters:
-
resultObjectThe result data object
-
requestStringThe current query string
-
resultMatchStringThe string from the results that matches the query
Returns:
generateRequest
-
query
An overridable method that creates an object to be passed to the sendRequest method of the data source object. Useful to overwrite if you wish to create a custom request object before it's sent.
Parameters:
-
queryStringThe string currently being entered
Returns:
handleResponse
-
event
Handles the response for the display of the results. This is a callback method that is fired by the sendRequest method so that results are ready to be accessed.
Parameters:
-
eventEventFacade
initializer
()
protected
Construction logic executed during AutoComplete instantiation. Lifecycle.
renderUI
()
protected
Create the DOM structure for the AutoComplete. Lifecycle.
sendQuery
-
query
Sends a query request to the data source object.
Parameters:
-
queryStringQuery string
syncUI
()
protected
Sync the AutoComplete UI. Lifecycle.
Properties
AutoComplete.ATTRS
Object
static
Static property used to define the default attribute configuration for the AutoComplete.
AutoComplete.NAME
String
static
Static property provides a string to identify the class.
Attributes
alwaysShowContainer
Boolean
Always show the results container, instead of only showing when the user is requesting them.
Default: false
applyLocalFilter
Boolean
If set to true, the <a href="AutoComplete.html#method_filterResults">filterResults</a> method will be run on the response from the data source.
Default: true
autoHighlight
Boolean
Automatically highlight the first item in the list when the results are made visible.
Default: true
dataSource
Object | String | Function | Array
The data source that results will be read from. This can either be an existing <a href="DataSource.html">DataSource</a> object, or it can be a value that would be passed to <a href="DataSource.html">DataSource</a>.
Default: null
dataSourceType
String
The type of the data source passed into <a href="AutoComplete.html#config_dataSource">dataSource</a>. This can be used to explicitly declare what kind of <a href="DataSource.html">DataSource</a> object will be created.
Default: null
delimChar
String
The character used to indicate the beginning or ending of a new value. Most commonly used is a ",".
Default: null
forceSelection
Boolean
If <a href="AutoComplete.html#config_typeAhead">typeAhead</a> is true, this will clear a selection when the overlay closes unless a user explicitly selects an item.
Default: false
matchKey
String | Number
The key or numeric index in the schema to match the result against.
Default: 0
minQueryLength
Number
The minimum number of characters required to query the data source.
Default: 1
queryInterval
Number
When IME usage is detected or interval detection is explicitly enabled, AutoComplete will detect the input value at the given interval and send a query if the value has changed.
Default: 0.5
queryMatchCase
Boolean
When <a href="AutoComplete.html#config_applyLocalFilter">applyLocalFilter</a> is true, setting this to true will match only results with the same case.
Default: false
queryMatchContains
Boolean
When <a href="AutoComplete.html#config_applyLocalFilter">applyLocalFilter</a> is true, setting this to true will match results which contain the query anywhere in the text, instead of just matching just items that start with the query.
Default: false
queryQuestionMark
Boolean
For IO DataSources, AutoComplete will automatically insert a "?" between the server URI and the encoded query string. To prevent this behavior, you can set this value to false. If you need to customize this even further, you can override the <a href="AutoComplete.html#method_generateRequest">generateRequest</a> method.
Default: true
schema
Object
A valid configuration object for any of <a href="module_datasource.html">DataSource</a> schema plugins.
Default: null
schemaType
String
A valid type of <a href="module_datasource.html">DataSource</a> schema plugin, such as array, json, xml, etc.
Default: array
suppressInputUpdate
Boolean
Whether or not the input field should be updated with selections.
Default: false
typeAhead
Boolean
If <a href="AutoComplete.html#config_autoHighlight">autoHighlight</a> is enabled, whether or not the input field should be automatically updated with the first result as the user types, automatically selecting the portion of the text the user has not typed yet.
Default: false
typeAheadDelay
Number
If <a href="AutoComplete.html#config_typeAhead">typeAhead</a> is true, number of seconds to delay before updating the input. In order to prevent certain race conditions, this value must always be greater than the <a href="AutoComplete.html#config_queryDelay">queryDelay</a>.
Default: 0.2
Events
containerCollapse
Handles the containerCollapse event. Fired when the container is hidden.
Event Payload:
-
eventEvent.FacadeThe containerCollapse event.
containerExpand
Handles the containerExpand event. Fired when the container is shown.
Event Payload:
-
eventEvent.FacadeThe containerExpand event.
containerPopulate
Handles the containerPopulate event. Fired when the container is populated.
Event Payload:
-
eventEvent.FacadeThe containerPopulate event.
dataError
Handles the dataError event. Fired when there is an error accessing the data.
Event Payload:
-
eventEvent.FacadeThe dataError event.
dataRequest
Handles the dataRequest event. Fired when ever a query is sent to the data source.
Event Payload:
-
eventEvent.FacadeThe dataRequest event.
dataReturn
Handles the dataReturn event. Fired when data successfully comes back from the data request.
Event Payload:
-
eventEvent.FacadeThe dataReturn event.
itemArrowFrom
Handles the itemArrowFrom event. Fired when the user navigates via the keyboard away from a selected item.
Event Payload:
-
eventEvent.FacadeThe itemArrowFrom event.
itemArrowTo
Handles the itemArrowTo event. Fired when the user navigates via the keyboard to a selected item.
Event Payload:
-
eventEvent.FacadeThe itemArrowTo event.
itemMouseOut
Handles the itemMouseOut event. Fired when the user mouses away from an item.
Event Payload:
-
eventEvent.FacadeThe itemMouseOut event.
itemMouseOver
Handles the itemMouseOver event. Fired when the user mouses over an item.
Event Payload:
-
eventEvent.FacadeThe itemMouseOver event.
itemSelect
Handles the itemSelect event. Fired when an item in the list is selected.
Event Payload:
-
eventEvent.FacadeThe itemSelect event.
selectionEnforce
Handles the selectionEnforce event. Fired if <a href="Autocomplete.html#config_forceSelection">forceSelection</a> is enabled and the users input element has been cleared because it did not match one of the results.
Event Payload:
-
eventEvent.FacadeThe selectionEnforce event.
textboxBlur
Handles the textboxBlur event. Fired when the user leaves the input element.
Event Payload:
-
eventEvent.FacadeThe textboxBlur event.
textboxChange
Handles the textboxChange event. Fired when the value in the input element is changed.
Event Payload:
-
eventEvent.FacadeThe textboxChange event.
textboxFocus
Handles the textboxFocus event. Fired when user moves focus to the input element.
Event Payload:
-
eventEvent.FacadeThe textboxFocus event.
textboxKey
Handles the textboxKey event. Fired when the input element receives key input.
Event Payload:
-
eventEvent.FacadeThe textboxKey event.
typeAhead
Handles the typeAhead event. Fired when the input element has been pre-filled by the type-ahead feature.
Event Payload:
-
eventEvent.FacadeThe typeAhead event.
unmatchedItemSelect
Handles the unmatchedItemSelect event. Fired when a user selects something that does not match any of the displayed results.
Event Payload:
-
eventEvent.FacadeThe unmatchedItemSelect event.