AutoComplete

Overview

AutoComplete ComboBox. Component filters and displays results as the user enters text into the combo.

Creating the AutoComplete Component

The AutoComplete extends the Flex ComboBox class. It can be added as a child to any container that implements IVisualElementContainer.

Using the AutoComplete Component

Functions like a normal ComboBox with a few exceptions noted below.

DataProvider

The dataProvider must implement ICollection otherwise the component will throw an RTE.

Getting Selection (SelectedItem vs. SelectedIndex)

The "selectedIndex" property is less useful in the AutoComplete than other ListBase components due to filtering, which means that the "selectedIndex" refers to the selection within the filtered store, not the original dataProvider.

For example: assume you have a dataProvider with 5 strings:

var dp:ArrayCollection = new ArrayCollection(["A", "B", "C", "D", "E"]);, 
var ac:AutoComplete = new AutoComplete().dataProvider = dp;

The user selects "C". The selectedIndex will be 0 but dp[0] will not return the correct data. However, ac.dataProvider[0] will return the correct value because ac.dataProvider refers to to the filtered dataProvider, not the original unfiltered dataProvider.

The easiest way to avoid confusion is to use the "selectedItem" property to retrieve the selected data rather than the selectedIndex.

AdvTextInput

If the AutoComplete textInput skin part is an AdvTextInput, the AutoComplete component then supports clearing and an optional icon embedded within the textInput skin part.

Item Renderers

As results are filtered the matches are highlighted in the possible remaining choices in the drop down list. ItemRenderers must implement "IAutoCompleteRenderer" for this to work. Currently, a relatively heavy renderer is defined inline for both the Spark and London themes.

Pure actionscript renderers always had strange TLF issues.

Focus

Should handle focus like a vanilla ComboBox.

Accessibility

Should handle keyboard input like a vanilla ComboBox.

Selected Custom Events

See the AdvTextInput class for custom event(s).

Selected Custom Styles

See the AdvTextInput class for custom styles(s).

Themes & Skinning

Skins for the Spark, London, and Stockholm themes are provided.

Example

See the AutoComplete demo application for example code.

Back To Top