Quick tip: Avoid issues using Adobes AutoComplete Input component using Flex 3

Posted on April 30, 2008

There are several Flex components for handling auto completion out there, for example components called CompletionInput, Autocomplete TextInput or Adobes AutoComplete Input. For a current Flex 3 based project I decided to use Adobes component and had the following issue:

If you select the first item of the results pressing ENTER or just clicking by mouse, you will "lost" the value of the selected item. That means, it won't be shown at the TextInput located on the top. It seems, that this issues appears using Flex 3 only (not Flex 2).

Example

For testing both components:

1) Type just a "b" in one of the TextFields

2a) Press ENTER

2b) Or select just the first item clicking by mouse.

3) Compare the behavior of both components.

Solution

To show the label of the selected item within the TextField just override the method called close of the com.adobe.flex.extras.controls.AutoComplete which extends the mx.controls.ComboBox.

 1 /**
 2  *  Closes the combox and set the selection which is lost using Flex 3
 3  *
 4  *  @event  Event   Trigger event to close the combobox
 5  */
 6 override public function close(event:Event = null):void
 7 {
 8  super.close(event);
 9 
10  if(selectedIndex == 0)
11  {
12      // set the text using the selected label
13      textInput.text = selectedLabel;
14      // select the text from typed text position to texts length
15      textInput.setSelection(cursorPosition, textInput.text.length);
16  }
17 
18 }

Download full source

Full source of the example above: AutoCompleteSample.zip

Any feedback?