Nate's Code Vault

I recently came across a discussion on LinkedIn about what AutoComplete solutions are out there for Flex. I never realized how many AutoComplete implementations are out there! As for myself, I have only tried two… the first was Adobe’s AutoComplete component and the second was Yahoo’s AutoCompleteManager.

I tried Adobe’s AutoComplete component first because I figured it would be the best. I mean, come on, it’s Adobe right? Didn’t they write the Flex framework or something? This component is based off of a ComboBox which allows for a slick looking animated dropdown, plus it comes with hooks to tie into Local Storage. After closer inspection, I noticed an annoying flickering whenever a key is pressed. Plus there were a few issues with it that I found here (make sure to read all the comments). Plus, since it is not based on TextInput, there are a few properties that got left out that I had to implement on my own (maxChars for example). In the end, I concluded that the component seemed a little underdeveloped and unstable.

The second place I went to was Yahoo’s AutoCompleteManager. This component is based off of EventDispatcher, allows you to reference 1 or multiple TextInput controls, and allows for Local Storage. Although it doesn’t have the glitz of Adobe’s AutoComplete animated dropdown, it doesn’t have the flicker either. All-in-all, I found this component to be much better and required me to do fewer modifications than Adobe’s component. However, there was still one issue — the defaultButton wasn’t firing on the Keyboard.ENTER event.

For those of you who are having issues with this, I have provided a fix. It resides in the keyDownHandler. Normally, when an enter key is pressed, the TextInput will notify the defaultButton that is should be clicked. However, AutoCompleteManager prevents the propagation of this event because ENTER is reserved for selecting an option from the autocomplete dropdown. Luckily, the fix is easy.

Here is the original code…

1
2
3
4
5
6
7
8
9
10
11

else if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.ENTER)
{
    if (_currentDropdown && _currentCollection)
    {
        ... 4 lines of code I am too lazy to type ...
    }
 
    _inKeyDown = false;
    display(false, textInput);
    event.stopPropagation();
}

And here is the fix…

1
2
3
4
5
6
7
8
9
10
11
12

else if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.ENTER)
{
    if (_currentDropdown && _currentCollection)
    {
        ... 4 lines of code I am too lazy to type ...
 
        event.stopPropagation();
    }
 
    _inKeyDown = false;
    display(false, textInput);
}

In case you don’t see it, I moved event.stopPropagation(); up into the if statement. This makes it so that the event is blocked only when the dropdown is showing. When the dropdown is not showing, ENTER is allowed to propagate to allow TextInput to receive the event and notify the defaultButton.