Show:

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:

  • config Object

    Object literal specifying widget configuration properties.

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:

String:

_enableIntervalDetection

() protected

<p>Enables query interval detection for IME support.</p>

_extractQuery

(
  • query
)
String protected

<p>Extracts the right most query from the delimited string in the input.</p>

Parameters:

  • query String

    <p>String to parse</p>

Returns:

String:

_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
)
protected

<p>Triggered by the up and down arrow keys, changes the currently selected list element item, and scrolls the container if necessary.</p>

Parameters:

  • keyCode Number

    <p>The numeric code of the key pressed</p>

_onButtonMouseDown

(
  • event
)
protected

<p>Called when the user mouses down on the button element in the combobox.</p>

Parameters:

_onContainerClick

(
  • event
)
protected

<p>Handles when a user clicks on the container.</p>

Parameters:

_onContainerMouseout

(
  • event
)
protected

<p>Handles when a user mouses out of the container.</p>

Parameters:

_onContainerMouseover

(
  • event
)
protected

<p>Handles when a user mouses over the container.</p>

Parameters:

_onContainerScroll

(
  • event
)
protected

<p>Handles the container scroll events.</p>

Parameters:

_onInterval

() protected

<p>Enables the query to be triggered based on detecting text input via intervals instead of via key events.</p>

_onTextboxBlur

(
  • event
)
protected

<p>Handles the input element losing focus.</p>

Parameters:

_onTextboxFocus

(
  • event
)
protected

<p>Handles the input element gaining focus.</p>

Parameters:

_onTextboxKeyDown

(
  • event
)
protected

<p>Handles the keydown events on the input element for functional keys.</p>

Parameters:

_onTextboxKeyPress

(
  • event
)
protected

<p>Handles the key press events of the input element.</p>

Parameters:

_onTextboxKeyUp

(
  • event
)
protected

<p>Handles the keyup events of the input element.</p>

Parameters:

_populateList

(
  • event
)
protected

<p>Populates the container with list items of the query results.</p>

Parameters:

_realignContainer

(
  • event
)
protected

<p>Realigns the container to the input element.</p>

Parameters:

_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
)
protected

<p>Selects a list item from the query results.</p>

Parameters:

  • elListItem Node

    <p>The list item to select</p>

_sendQuery

(
  • query
)
protected

<p>Makes a query request to the data source.</p>

Parameters:

  • query String

    <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
)
protected

<p>Toggles the display of the results container.</p>

Parameters:

  • show Boolean

    <p>Flag to force the showing or hiding of the container</p>

_toggleHighlight

(
  • elNewListItem
  • action
)
protected

<p>Toggles the highlighting of a list item, and removes the highlighting from the previous item</p>

Parameters:

  • elNewListItem Node

    <p>The item to be highlighted</p>

  • action String

    <p>Whether we are moving to or from an item. Valid values are "to" or "from".</p>

_typeAhead

(
  • elListItem
  • query
)
protected

<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:

  • elListItem Node

    <p>The selected list item</p>

  • query String

    <p>The query string</p>

_updateValue

(
  • elListItem
)
protected

<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:

  • elListItem Node

    <p>The selected list item</p>

bindUI

() protected

Bind the events on the Textboxlist UI. Lifecycle.

compile

(
  • group
  • flags
)
private

Return a unicode regex for the given group (under A.Text.Data.Unicode).

Parameters:

  • group String
  • flags String

destructor

() protected

<p>Destructor lifecycle implementation for the Autocomplete class. Purges events attached to the node (and all child nodes).</p>

doBeforeExpandContainer

(
  • query
  • allResults
)
Boolean

<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:

  • query String

    <p>The query that was submitted to the data source</p>

  • allResults Object

    <p>The parsed results</p>

Returns:

Boolean:

doBeforeLoadData

(
  • event
)
Boolean

<p>An overridable method that is executed before the result overlay is loaded with results.</p>

Parameters:

Returns:

Boolean:

filterResults

(
  • event
)
Object

<p>Executed by the data source as a mechanism to do simple client-side filtering of the results.</p>

Parameters:

Returns:

Object:

<p>Filtered response object</p>

formatResult

(
  • result
  • request
  • resultMatch
)
String

<p>An overridable method for formatting the result of the query before it's displayed in the overlay.</p>

Parameters:

  • result Object

    <p>The result data object</p>

  • request String

    <p>The current query string</p>

  • resultMatch String

    <p>The string from the results that matches the query</p>

Returns:

String:

generateRequest

(
  • query
)
Object

<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:

  • query String

    <p>The string currently being entered</p>

Returns:

Object:

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:

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:

  • str String
  • group String
  • flags String

renderUI

() protected

Create the DOM structure for the Textboxlist. Lifecycle.

sendQuery

(
  • query
)

<p>Sends a query request to the data source object.</p>

Parameters:

  • query String

    <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:

  • str String
  • group String
  • flags String

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

button

Boolean deprecated

<p>To use a button</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

input

String | Node

<p>The input field which will recieve the users input.</p>

Default: null

matchKey

String | Number

<p>The key or numeric index in the schema to match the result against.</p>

Default: 0

maxResultsDisplayed

Number

<p>The maximum number of results to display.</p>

Default: 10

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

uniqueName

String

<p>The unique ID of the input element.</p>

Default: null

Events

containerCollapse

<p>Handles the containerCollapse event. Fired when the container is hidden.</p>

Event Payload:

containerExpand

<p>Handles the containerExpand event. Fired when the container is shown.</p>

Event Payload:

containerPopulate

<p>Handles the containerPopulate event. Fired when the container is populated.</p>

Event Payload:

dataError

<p>Handles the dataError event. Fired when there is an error accessing the data.</p>

Event Payload:

dataRequest

<p>Handles the dataRequest event. Fired when ever a query is sent to the data source.</p>

Event Payload:

dataReturn

<p>Handles the dataReturn event. Fired when data successfully comes back from the data request.</p>

Event Payload:

itemArrowFrom

<p>Handles the itemArrowFrom event. Fired when the user navigates via the keyboard away from a selected item.</p>

Event Payload:

itemArrowTo

<p>Handles the itemArrowTo event. Fired when the user navigates via the keyboard to a selected item.</p>

Event Payload:

itemMouseOut

<p>Handles the itemMouseOut event. Fired when the user mouses away from an item.</p>

Event Payload:

itemMouseOver

<p>Handles the itemMouseOver event. Fired when the user mouses over an item.</p>

Event Payload:

itemSelect

<p>Handles the itemSelect event. Fired when an item in the list is selected.</p>

Event Payload:

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:

textboxBlur

<p>Handles the textboxBlur event. Fired when the user leaves the input element.</p>

Event Payload:

textboxChange

<p>Handles the textboxChange event. Fired when the value in the input element is changed.</p>

Event Payload:

textboxFocus

<p>Handles the textboxFocus event. Fired when user moves focus to the input element.</p>

Event Payload:

textboxKey

<p>Handles the textboxKey event. Fired when the input element receives key input.</p>

Event Payload:

typeAhead

<p>Handles the typeAhead event. Fired when the input element has been pre-filled by the type-ahead feature.</p>

Event Payload:

unmatchedItemSelect

<p>Handles the unmatchedItemSelect event. Fired when a user selects something that does not match any of the displayed results.</p>

Event Payload: