Show:
Extends: Component
Module: autocomplete-list
Parent Module: autocomplete

Alias for <a href="AutoCompleteList.html">AutoCompleteList</a>. See that class for API docs.

Constructor

AutoComplete

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

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:

String:

_enableIntervalDetection

() protected

Enables query interval detection for IME support.

_extractQuery

(
  • query
)
String protected

Extracts the right most query from the delimited string in the input.

Parameters:

  • query String

    String to parse

Returns:

String:

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

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

Parameters:

  • keyCode Number

    The numeric code of the key pressed

_onButtonMouseDown

(
  • event
)
protected

Called when the user mouses down on the button element in the combobox.

Parameters:

_onContainerClick

(
  • event
)
protected

Handles when a user clicks on the container.

Parameters:

_onContainerMouseout

(
  • event
)
protected

Handles when a user mouses out of the container.

Parameters:

_onContainerMouseover

(
  • event
)
protected

Handles when a user mouses over the container.

Parameters:

_onContainerScroll

(
  • event
)
protected

Handles the container scroll events.

Parameters:

_onInterval

() protected

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

_onTextboxBlur

(
  • event
)
protected

Handles the input element losing focus.

Parameters:

_onTextboxFocus

(
  • event
)
protected

Handles the input element gaining focus.

Parameters:

_onTextboxKeyDown

(
  • event
)
protected

Handles the keydown events on the input element for functional keys.

Parameters:

_onTextboxKeyPress

(
  • event
)
protected

Handles the key press events of the input element.

Parameters:

_onTextboxKeyUp

(
  • event
)
protected

Handles the keyup events of the input element.

Parameters:

_populateList

(
  • event
)
protected

Populates the container with list items of the query results.

Parameters:

_realignContainer

(
  • event
)
protected

Realigns the container to the input element.

Parameters:

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

Selects a list item from the query results.

Parameters:

  • elListItem Node

    The list item to select

_sendQuery

(
  • query
)
protected

Makes a query request to the data source.

Parameters:

  • query String

    The query string

_textMatchesOption

() protected

Checks to see if the value typed by the user matches any of the query results.

_toggleContainer

(
  • show
)
protected

Toggles the display of the results container.

Parameters:

  • show Boolean

    Flag to force the showing or hiding of the container

_toggleHighlight

(
  • elNewListItem
  • action
)
protected

Toggles the highlighting of a list item, and removes the highlighting from the previous item

Parameters:

  • elNewListItem Node

    The item to be highlighted

  • action String

    Whether we are moving to or from an item. Valid values are "to" or "from".

_typeAhead

(
  • elListItem
  • query
)
protected

Updates in the input element with the first result as the user types, selecting the text the user has not typed yet.

Parameters:

  • elListItem Node

    The selected list item

  • query String

    The query string

_updateValue

(
  • elListItem
)
protected

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:

  • elListItem Node

    The 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
)
Boolean

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:

  • query String

    The query that was submitted to the data source

  • allResults Object

    The parsed results

Returns:

Boolean:

doBeforeLoadData

(
  • event
)
Boolean

An overridable method that is executed before the result overlay is loaded with results.

Parameters:

Returns:

Boolean:

filterResults

(
  • event
)
Object

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

Parameters:

Returns:

Object:

Filtered response object

formatResult

(
  • result
  • request
  • resultMatch
)
String

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

Parameters:

  • result Object

    The result data object

  • request String

    The current query string

  • resultMatch String

    The string from the results that matches the query

Returns:

String:

generateRequest

(
  • query
)
Object

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:

  • query String

    The string currently being entered

Returns:

Object:

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:

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:

  • query String

    Query 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

button

Boolean deprecated

To use a button

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

input

String | Node

The input field which will recieve the users input.

Default: null

matchKey

String | Number

The key or numeric index in the schema to match the result against.

Default: 0

maxResultsDisplayed

Number

The maximum number of results to display.

Default: 10

minQueryLength

Number

The minimum number of characters required to query the data source.

Default: 1

queryDelay

Number

The amount of time in seconds to delay before submitting the query.

Default: 0.2

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

uniqueName

String

The unique ID of the input element.

Default: null

Events

containerCollapse

Handles the containerCollapse event. Fired when the container is hidden.

Event Payload:

containerExpand

Handles the containerExpand event. Fired when the container is shown.

Event Payload:

containerPopulate

Handles the containerPopulate event. Fired when the container is populated.

Event Payload:

dataError

Handles the dataError event. Fired when there is an error accessing the data.

Event Payload:

dataRequest

Handles the dataRequest event. Fired when ever a query is sent to the data source.

Event Payload:

dataReturn

Handles the dataReturn event. Fired when data successfully comes back from the data request.

Event Payload:

itemArrowFrom

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

Event Payload:

itemArrowTo

Handles the itemArrowTo event. Fired when the user navigates via the keyboard to a selected item.

Event Payload:

itemMouseOut

Handles the itemMouseOut event. Fired when the user mouses away from an item.

Event Payload:

itemMouseOver

Handles the itemMouseOver event. Fired when the user mouses over an item.

Event Payload:

itemSelect

Handles the itemSelect event. Fired when an item in the list is selected.

Event Payload:

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:

textboxBlur

Handles the textboxBlur event. Fired when the user leaves the input element.

Event Payload:

textboxChange

Handles the textboxChange event. Fired when the value in the input element is changed.

Event Payload:

textboxFocus

Handles the textboxFocus event. Fired when user moves focus to the input element.

Event Payload:

textboxKey

Handles the textboxKey event. Fired when the input element receives key input.

Event Payload:

typeAhead

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

Event Payload:

unmatchedItemSelect

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

Event Payload: