Flex Auto Complete Control

 Hello all,

 

I have been working on a project that involves allot of data input through a flex GUI.  The most common control for input that we use is an Auto Complete control.  The way this works is by providing a data source of items to suggest as the user inputs text.  As matches are found the results are displayed to the user similar to the GUI of the ComboBox control.

 

The control that was used in the project worked in that it displayed the suggestions and allowed the user to select more than one option.  However,  there were a few drawbacks:

1) Directional arrow input did not cycle through the visible suggestion.

2) The backspace button didn't erase the text of an item in a manageable way.

3) The results were displayed as just text.  I wanted to display items like on Facebook with blue circle borders.

4) If there were a significant number of suggestions the control would hang the browser.

 

The last problem was of course a show stopper.

 

To solve the first three issues I found a control created by another Flex Programmer, Hillel Coren.  His page can be found here:  http://hillelcoren.com/flex-autocomplete/  

 

He worked on this Auto Complete control through many versions and the control is quite extensible.  Feel free to view his documentation for more details.

 

To solve the large amounts of data I used the following technique.  I had some constraints since I wanted the structure of the auto complete suggestions to be similar to how I get the data from the server.  The project I am working on uses BlazeDS and large arrays of data are translated into DataFacade data type on the flex side.  What I did was create a Dictionary and used the first letter of each suggestion as the key.  This way I would have up to 26 DataFacades in my Dictionary.  When the user started typing the amount of data to search was restricted to the first letter.  This helped allot when some of the lists contained more than 50,000 suggestions total and all I needed to search were items starting with A, for example.  

 

So thank you to Hillel for his amazing work.  I hope this reference helps someone else out

 

Happy Coding,

 

Dov

 

 

Developer