Textboxlist Class
A base class for Textboxlist, providing: <ul> <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> <li>Text box list</li> </ul>
Check the list of <a href="Textboxlist.html#configattributes">Configuration Attributes</a> available for Textboxlist.
Constructor
Textboxlist
-
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
- compile
- destructor
- doBeforeExpandContainer
- doBeforeLoadData
- filterResults
- formatResult
- generateRequest
- handleResponse
- initializer
- match
- renderUI
- sendQuery
- syncUI
- test
Properties
- Textboxlist.ATTRS static
- Textboxlist.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
<p>Clears the query interval</p>
_clearSelection
()
protected
<p>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.</p>
_createDataSource
()
String
protected
<p>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.</p>
Returns:
_enableIntervalDetection
()
protected
<p>Enables query interval detection for IME support.</p>
_extractQuery
-
query
<p>Extracts the right most query from the delimited string in the input.</p>
Parameters:
-
queryString<p>String to parse</p>
Returns:
_focus
()
protected
<p>Focuses the input element.</p>
_jumpSelection
()
protected
<p>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.</p>
_moveSelection
-
keyCode
<p>Triggered by the up and down arrow keys, changes the currently selected list element item, and scrolls the container if necessary.</p>
Parameters:
-
keyCodeNumber<p>The numeric code of the key pressed</p>
_onButtonMouseDown
-
event
<p>Called when the user mouses down on the button element in the combobox.</p>
Parameters:
-
eventEventFacade
_onContainerClick
-
event
<p>Handles when a user clicks on the container.</p>
Parameters:
-
eventEventFacade
_onContainerMouseout
-
event
<p>Handles when a user mouses out of the container.</p>
Parameters:
-
eventEventFacade
_onContainerMouseover
-
event
<p>Handles when a user mouses over the container.</p>
Parameters:
-
eventEventFacade
_onContainerScroll
-
event
<p>Handles the container scroll events.</p>
Parameters:
-
eventEventFacade
_onInterval
()
protected
<p>Enables the query to be triggered based on detecting text input via intervals instead of via key events.</p>
_onTextboxBlur
-
event
<p>Handles the input element losing focus.</p>
Parameters:
-
eventEventFacade
_onTextboxFocus
-
event
<p>Handles the input element gaining focus.</p>
Parameters:
-
eventEventFacade
_onTextboxKeyDown
-
event
<p>Handles the keydown events on the input element for functional keys.</p>
Parameters:
-
eventEventFacade
_onTextboxKeyPress
-
event
<p>Handles the key press events of the input element.</p>
Parameters:
-
eventEventFacade
_onTextboxKeyUp
-
event
<p>Handles the keyup events of the input element.</p>
Parameters:
-
eventEventFacade
_populateList
-
event
<p>Populates the container with list items of the query results.</p>
Parameters:
-
eventEventFacade
_realignContainer
-
event
<p>Realigns the container to the input element.</p>
Parameters:
-
eventEventFacade
_renderInput
()
protected
<p>Handles the rendering of the input element.</p>
_renderListElements
()
protected
<p>Pre-populates the container with the <a href="Autocomplete.html#config_maxResultsDisplayed">maxResultsDisplayed</a> number of list items.</p>
_renderOverlay
()
protected
<p>Handles the creation of the overlay where the result list will be displayed.</p>
_selectItem
-
elListItem
<p>Selects a list item from the query results.</p>
Parameters:
-
elListItemNode<p>The list item to select</p>
_sendQuery
-
query
<p>Makes a query request to the data source.</p>
Parameters:
-
queryString<p>The query string</p>
_textMatchesOption
()
protected
<p>Checks to see if the value typed by the user matches any of the query results.</p>
_toggleContainer
-
show
<p>Toggles the display of the results container.</p>
Parameters:
-
showBoolean<p>Flag to force the showing or hiding of the container</p>
_toggleHighlight
-
elNewListItem -
action
<p>Toggles the highlighting of a list item, and removes the highlighting from the previous item</p>
Parameters:
-
elNewListItemNode<p>The item to be highlighted</p>
-
actionString<p>Whether we are moving to or from an item. Valid values are "to" or "from".</p>
_typeAhead
-
elListItem -
query
<p>Updates in the input element with the first result as the user types, selecting the text the user has not typed yet.</p>
Parameters:
-
elListItemNode<p>The selected list item</p>
-
queryString<p>The query string</p>
_updateValue
-
elListItem
<p>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.</p>
Parameters:
-
elListItemNode<p>The selected list item</p>
bindUI
()
protected
Bind the events on the Textboxlist UI. Lifecycle.
compile
-
group -
flags
Return a unicode regex for the given group (under A.Text.Data.Unicode).
Parameters:
-
groupString -
flagsString
destructor
()
protected
<p>Destructor lifecycle implementation for the Autocomplete class. Purges events attached to the node (and all child nodes).</p>
doBeforeExpandContainer
-
query -
allResults
<p>An overridable method that is executed before the result container is shown. The method can return false to prevent the container from being shown.</p>
Parameters:
-
queryString<p>The query that was submitted to the data source</p>
-
allResultsObject<p>The parsed results</p>
Returns:
doBeforeLoadData
-
event
<p>An overridable method that is executed before the result overlay is loaded with results.</p>
Parameters:
-
eventEventFacade
Returns:
filterResults
-
event
<p>Executed by the data source as a mechanism to do simple client-side filtering of the results.</p>
Parameters:
-
eventEventFacade
Returns:
<p>Filtered response object</p>
formatResult
-
result -
request -
resultMatch
<p>An overridable method for formatting the result of the query before it's displayed in the overlay.</p>
Parameters:
-
resultObject<p>The result data object</p>
-
requestString<p>The current query string</p>
-
resultMatchString<p>The string from the results that matches the query</p>
Returns:
generateRequest
-
query
<p>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.</p>
Parameters:
-
queryString<p>The string currently being entered</p>
Returns:
handleResponse
-
event
<p>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.</p>
Parameters:
-
eventEventFacade
initializer
()
protected
Construction logic executed during Textboxlist instantiation. Lifecycle.
match
-
str -
group -
flags
Tests a string against an Unicode pattern. Returns the first match.
Parameters:
-
strString -
groupString -
flagsString
renderUI
()
protected
Create the DOM structure for the Textboxlist. Lifecycle.
sendQuery
-
query
<p>Sends a query request to the data source object.</p>
Parameters:
-
queryString<p>Query string</p>
syncUI
()
protected
<p>Sync the AutoComplete UI. Lifecycle.</p>
test
-
str -
group -
flags
Tests a string against an Unicode pattern. Returns true or false.
Parameters:
-
strString -
groupString -
flagsString
Properties
Textboxlist.ATTRS
Object
static
Static property used to define the default attribute configuration for the Textboxlist.
Textboxlist.NAME
String
static
Static property provides a string to identify the class.
Attributes
alwaysShowContainer
Boolean
<p>Always show the results container, instead of only showing when the user is requesting them.</p>
Default: false
applyLocalFilter
Boolean
<p>If set to true, the <a href="AutoComplete.html#method_filterResults">filterResults</a> method will be run on the response from the data source.</p>
Default: true
autoHighlight
Boolean
<p>Automatically highlight the first item in the list when the results are made visible.</p>
Default: true
dataSource
Object | String | Function | Array
<p>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>.</p>
Default: null
dataSourceType
String
<p>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.</p>
Default: null
delimChar
String
<p>The character used to indicate the beginning or ending of a new value. Most commonly used is a ",".</p>
Default: null
forceSelection
Boolean
<p>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.</p>
Default: false
matchKey
String | Number
<p>The key or numeric index in the schema to match the result against.</p>
Default: 0
minQueryLength
Number
<p>The minimum number of characters required to query the data source.</p>
Default: 1
queryDelay
Number
<p>The amount of time in seconds to delay before submitting the query.</p>
Default: 0.2
queryInterval
Number
<p>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.</p>
Default: 0.5
queryMatchCase
Boolean
<p>When <a href="AutoComplete.html#config_applyLocalFilter">applyLocalFilter</a> is true, setting this to true will match only results with the same case.</p>
Default: false
queryMatchContains
Boolean
<p>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.</p>
Default: false
queryQuestionMark
Boolean
<p>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.</p>
Default: true
schema
Object
<p>A valid configuration object for any of <a href="module_datasource.html">DataSource</a> schema plugins.</p>
Default: null
schemaType
String
<p>A valid type of <a href="module_datasource.html">DataSource</a> schema plugin, such as array, json, xml, etc.</p>
Default: array
suppressInputUpdate
Boolean
<p>Whether or not the input field should be updated with selections.</p>
Default: false
typeAhead
Boolean
<p>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.</p>
Default: false
typeAheadDelay
Number
<p>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>.</p>
Default: 0.2
Events
containerCollapse
<p>Handles the containerCollapse event. Fired when the container is hidden.</p>
Event Payload:
-
eventEvent.Facade<p>The containerCollapse event.</p>
containerExpand
<p>Handles the containerExpand event. Fired when the container is shown.</p>
Event Payload:
-
eventEvent.Facade<p>The containerExpand event.</p>
containerPopulate
<p>Handles the containerPopulate event. Fired when the container is populated.</p>
Event Payload:
-
eventEvent.Facade<p>The containerPopulate event.</p>
dataError
<p>Handles the dataError event. Fired when there is an error accessing the data.</p>
Event Payload:
-
eventEvent.Facade<p>The dataError event.</p>
dataRequest
<p>Handles the dataRequest event. Fired when ever a query is sent to the data source.</p>
Event Payload:
-
eventEvent.Facade<p>The dataRequest event.</p>
dataReturn
<p>Handles the dataReturn event. Fired when data successfully comes back from the data request.</p>
Event Payload:
-
eventEvent.Facade<p>The dataReturn event.</p>
itemArrowFrom
<p>Handles the itemArrowFrom event. Fired when the user navigates via the keyboard away from a selected item.</p>
Event Payload:
-
eventEvent.Facade<p>The itemArrowFrom event.</p>
itemArrowTo
<p>Handles the itemArrowTo event. Fired when the user navigates via the keyboard to a selected item.</p>
Event Payload:
-
eventEvent.Facade<p>The itemArrowTo event.</p>
itemMouseOut
<p>Handles the itemMouseOut event. Fired when the user mouses away from an item.</p>
Event Payload:
-
eventEvent.Facade<p>The itemMouseOut event.</p>
itemMouseOver
<p>Handles the itemMouseOver event. Fired when the user mouses over an item.</p>
Event Payload:
-
eventEvent.Facade<p>The itemMouseOver event.</p>
itemSelect
<p>Handles the itemSelect event. Fired when an item in the list is selected.</p>
Event Payload:
-
eventEvent.Facade<p>The itemSelect event.</p>
selectionEnforce
<p>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.</p>
Event Payload:
-
eventEvent.Facade<p>The selectionEnforce event.</p>
textboxBlur
<p>Handles the textboxBlur event. Fired when the user leaves the input element.</p>
Event Payload:
-
eventEvent.Facade<p>The textboxBlur event.</p>
textboxChange
<p>Handles the textboxChange event. Fired when the value in the input element is changed.</p>
Event Payload:
-
eventEvent.Facade<p>The textboxChange event.</p>
textboxFocus
<p>Handles the textboxFocus event. Fired when user moves focus to the input element.</p>
Event Payload:
-
eventEvent.Facade<p>The textboxFocus event.</p>
textboxKey
<p>Handles the textboxKey event. Fired when the input element receives key input.</p>
Event Payload:
-
eventEvent.Facade<p>The textboxKey event.</p>
typeAhead
<p>Handles the typeAhead event. Fired when the input element has been pre-filled by the type-ahead feature.</p>
Event Payload:
-
eventEvent.Facade<p>The typeAhead event.</p>
unmatchedItemSelect
<p>Handles the unmatchedItemSelect event. Fired when a user selects something that does not match any of the displayed results.</p>
Event Payload:
-
eventEvent.Facade<p>The unmatchedItemSelect event.</p>