This component does not fully support Flex 4.5 and above. I’m leaving this page up as the component/code may be useful to some developers but I’m no longer actively supporting it.

Advanced Flex AutoComplete component which supports browsing, selecting and ordering multiple items.

Important Info

  • License: The component is freeware. You’re welcome to use it anyway you’d like, I just ask that you send back any bug fixes or improvements.
  • Support: I try as hard as possible to respond to all questions within a day. I’ve been using the component for a while now and am pretty confident that it works well. If you’d like to extend it I’m happy to work with you to get your feature working.

Version History

Other Options

A single solution usually doesn’t work for everyone. Here are some other excellent Flex Autocomplete components which may better fit your needs.

911 responses to “AutoComplete”

  1. Sherman says :

    Is there any way to configure the component such that an entered string can be “custom” (i.e. not in the list) but its name match the prefix of one or more items in the list?

    For example, I want to enter “goo” but one of the options in the list is “goober”. Right now, it seems no matter what I do, “goober” would always be what gets selected.

    I realize this may be a bit of an edge case, but it’s one for which I really hope there can be a clean work-around. Thanks.

    • Hillel says :

      If you hit escape to close the popup you should be able to enter any value.

      Hope this works as a solution for you…

    • DAVIDONE says :

      Hi! First, thank you for this wonderful component.
      I have a question.
      Why seems like text property in AutoComplete component always returns an empty string despite it appears correctly into the textinput box?

      _tiNotesBrief.text = “value”;

      trace(“TEXT SET ” + _tiNotesBrief.text);

      last trace printout an empty string =(

      • Hillel says :

        Text is a read-only property which returns the text of the selected items (ie, “one, two, three”).

        To set the search string which appears in the component you can set the searchText property.

        To set the selected item(s) you want to use either selectedItem, selectedItems or selectedItemIds.

        Hope this helps

      • DAVIDONE says :

        i don’t get why i can’t reply to your last post… anyway…

        what if i initialize AutoComplete component with a custom string that’s not any of the ones into the dataProvider list?

        if no changes are made, i guess no selectedItem will be set and i can’t get back my string.

        am i wrong?

      • Hillel says :

        I think it would depend on what allowNewValues is set to.

      • DAVIDONE says :

        allowNewValues is set to true

  2. Sherman says :

    Thanks, Hillel; that does work. I wonder, though, if anyone else might find it useful to have a mode where no item in the drop down is selected by default but instead would require arrowing down or clicking on an item to explicitly select it. I think that might be the more intuitive solution to this particular issue.

  3. deanpaul says :

    Great..but really needs to be rewritten for spark. Also api is cluttered…i feel the advanced features need to be broken out into a separate module.

  4. deanpaul says :

    btw, is there a simple way to have the prediction drop box using a spark combobox? :(

  5. Dennis says :

    Hi Hillel,

    I have a problem regarding the arrow down key not working properly on the dropDownList.

    1. When typing only one or two letters as a searchKey, scrolling the dropdown results is working just fine.
    2. If I input in the searchKey a long string that has no results, then repeating the search done in #1, the list always highlights the first item on the dropdown results.
    (i.e. when pressing the arrow down key, it will move down, but it will immediately return to the first item in the list)

    Please help. Thank you.

    • Hillel says :

      I’m having trouble replicating the issue. If you could create a sample app demonstrating the issue I’d be happy to help you debug it.

  6. judoole says :

    Excellent component!
    Request: There should be a with the Autocomplete as an own repo or together with some other of components you may want to share.

    That way it would be much easier for the rest of us to contribute to feature requests such as
    As a user
    I want to have the possibility to always show the dropdown
    So that I don’t have to type to show all my options.

    OC ;)

  7. Jigar Patel says :


    i want to use this .swc file in flash Professional CS5.5 but it’s getting some unwanted error so please help me that it is usable in flash professional application.

    • Hillel says :

      I’m not sure if the component works in Flash Professional, at least I haven’t tried it myself.

      If you could send me the details of the error I can try to help.

      • Jigar Patel says :


        i got this type of error so please tell me how to remove this and which things used insted of this in flash professional

        Error : 1046: Type was not found or was not a compile-time constant: [mx.binding]::IBindingClient.

      • Hillel says :

        Have you tried using the Fx3 SWC?

  8. Jigar Patel says :


    yes i was used Fx3 swc for this implementation but it’s not working.

  9. VIJAY says :

    Hi Hillel Coren.. textinput event is not firing in this component. Can you please help me out?

    whenever im entering any text in this component, test() method is not being called..

  10. Ganesh says :

    Hi Hillel,

    We have 60,000 items to appear in the autocomplete and it takes around 1 minute to load the screen. Is there any way, where in which we could reduce this time, Caching / any alternative.

    Thank you

    • Hillel says :

      Have you considered implementing a server-side solution. ie, wait for the user to enter the first couple of letters and then load the matching results. You can see an example of how to make this work with the AutoComplete by looking at the DynamicData.mxml application in the examples folder of the download.

      • Ganesh says :

        Thank you for your response. Just looked at the code. we were loading the autocomplete in init() function.

        segpath = serverpath + file;

        public function loadseg(grid:ibiObject,obj:*):void {

        segAR = segObj.prGrid.source;
        segAC = new ArrayCollection(segAR);


        You are suggesting to load it in the showComboAll function, after the user enters more than 2 characters(from the DynamicData.mxml)

        delayTimer.addEventListener(TimerEvent.TIMER, showComboAll);

        Please let me know, if i was right. In that case, wont it slow down when user types in the data.

        Thank you,

  11. Ganesh says :

    I tried to load the items on search handler function, by doing that it takes 30 seconds every time user enters an alphabet in the autocomplete.

    Earlier by loading in init function, it used to take 30 seconds only at the begining, with the option above. it takes 30 seconds for every alphabet entered. Please let me know, if there are any other options.

    • Hillel says :

      I assume that when you load the data on init you’re loading all of the data. If the user types a couple of letters you’ll want to filter the data on the server and only return the matching records, this *should* be much quicker. Also you may want to disable the text input while searching, otherwise you need to cancel your request and submit a new one if the user continues to refine their search.

      • Ganesh says :

        Thank you. We tried doing this, but it still hangs for < 5 seconds, while the user types. the user needs to wait few seconds. do we have any other alternative or approach.

      • Hillel says :

        Sounds like an improvement… 5 seconds is a long time for data to load though, is it possible for you to optimize the server code. You could also try waiting until the user types more characters or limit the size of the result set. One other suggestion is to use an AMF solution, have you seen James Ward’s Census demo (

  12. Logarith says :

    Hi, is try to change selectedItemStyleName to underline, but nothing happens.
    It always stays with the standard Style.
    I tried to set it directly
    searchField.setStyle( “selectedItemStyleName”, “underline” );
    and with selectedItemStyleName=”underline”
    I also tried other styles like Facebook and none.
    I even tried to open the swc and change the standard in the default.css to underline. But nothing happens.

    I use Flex 3.5 and autocomplete 1.2.
    My component is:

    Does someone know what is the problem here.


    • Hillel says :

      Are you using the source or the SWC? If you’re using the source you’ll need to include the default.css style sheet (it’s included automatically when you use the SWC).

      • Logarith says :

        i use the swc

      • Hillel says :

        Can you try including the defaults.css file anyway to see if it helps. Otherwise, if you could email me a sample application which demonstrates the issue I’d be happy to help you debug it.

      • Logarith says :

        I got it know, but it isnt perfect.

        I tried to include the defaults.css but it didnt work. I created an example project which worked perfectly. But my project wont. It is a very huge project with nearly 20 flex projects which depend on each other SWC file.
        I tried to load the cssstyledeclaration for AutoComplete with the StyleManager Class. But its result is null. Seems to me that it isnt loaded, but I dont understand why the standard look with the blue border(MacMail) can then be shown.

        Now I copied the css style for underline directly in my
        mxml file with .underline { … }

        That worked.

      • Hillel says :

        Great, happy to hear you were able to figure it out.

        Thanks for letting me know.

  13. Logarith says :


    here for someone who is interested or comes into the same problem.
    My use case for Autocomplete was to develop an autocomplete search over a
    I have already the list which has a dataprovider and now I used also the autocomplete library for the same dataprovider.
    So when I enter something in the autocomplete search field, the other
    list with the same provider should filter in the same way as the autocomplete field. This worked quite well.
    But there were two behaviours I didnt want.
    When selecting one of the items in the autocomplete drop down, no new filter event was raised. so filtering the list only worked while typing letters in the field, so I needed a possibility to filter one time after I selected one item in the drop down. The next thing was that after selecting a delete of the selected item
    also didnt raise a reset of the list.
    So I programmed a workaround which is not very nice, and hasn`t very logical steps, but it works quite well. But maybe there is a much more simpler solution I didnt found.

    Here is my solution, for people who are interested.

    private function handleChange(event:Event):void {

    var searchFieldText:String = searchField.text;

    var selItem:Object = searchField.selectedItem;
    searchField.text = searchFieldText;

    searchField.selectedItem = selItem;


    Greetings and thx to Hillel for the library.

  14. wilsonw says :

    Hi Hillel,

    Thank you very much for the fantastic tool, it saves me lots of time.

    I was working on auto complete with remote data, and planned to add in a spinner to indicate server communication. But when I checked the code I’m happy to find the spinner component is already in PromptTextInput, but it’s commented out. Just curious why the spinner component is commented out? Is it causing any known issue?


    • Hillel says :

      I was planning to include the feature in the 1.2 release but in the end decided against it. I think what bothered me with the implementation was that it would show a line in the debug console each time the component was used. Not a big deal but it may be annoying to users who didn’t use the spinner. I didn’t get a chance to implement a better solution.

  15. Siyabonga says :

    Hi Hillel,

    Thanks for such a wonderful component, it ranks up there with the best Flex components! I have one question, I am using the Flex-Autocomplete on a DataGrid, how did you capture the change event on the DataGridColumn?

    Thanks a lot.

  16. Siyabonga says :

    Hi again Hillel,

    I was wondering, is it possible to connect the Flex-Autocomplete directly to a database call on Air (Sqlite database)?


    • Hillel says :

      I haven’t tried it myself but as far as I’m aware that should be possible. Another good article…

      • Siyabonga says :

        Thanks Hillel,

        Managed to do it, I caught keyUp event on the itemEditor and then I get the item editorInstance which contains the textInput property which is a PromptTextInput.

        I then get the text value of the PromptTextInput which have the value I entered on the itemEditor. Then I call the database synchronously and load the AutoComplete dataProvider with the resulting data. Something like this:

        var dataGrid:DataGrid = event.currentTarget as DataGrid;
        var editedItem:Object = dataGrid.editedItemPosition;
        var editedItemInstance:* = dataGrid.itemEditorInstance;
        var editedItemText:PromptTextInput = editedItemInstance.textInput;

        var result:Array = entityManager.quickFind(editedItemText.text);

        salesInventoryData = new ArrayCollection(result);

        It works beautifully! Thanks man.

  17. Siyabonga says :

    Hi Hillel and everyone,

    Just a related question.

    I was using a TextInput itemRenderer and I’ve just find out that it doesn’t capture the ‘enter’ event and the ‘change’ event.

    Can you guys please help me.

  18. Humberto Olguín says :

    Hi again Hillel

    I even try to do this to make work the autocomplete disabledItems with the following code but it doesn´t work. Any sugestion?

    In the previous post I put and example of my array collection from the database. I use this array to fill my combos and autocomplete controls. I supposed that if i match my combo dataprovider with the disableditems of autocomplete it should be work but when I try to add some items of that array the first time the autocomplete control add the item causes a duplicate value, not happen the second time because your control i think make some validation when I type the same value again.

    Please could you help me. Or maybe tell me how can i do and implementation a function to disableditems when my autocomplete control is filled with the 100% of the values and then i want to disable some of them.

    Thanks in advance Hillel.

    Example of My Code

    var res:ArrayCollection = new ArrayCollection(mycombo.dataProvider.toArray());
    autocomp1.selectedItems = res;

    var dis:ArrayCollection = new ArrayCollection(mycombo2.dataProvider.toArray());
    autocomp1.disabledItems = dis;


    autocomp1.disabledItems = autocomp2.selectedItems;

    Example of My ArrayCollection

    var names:ArrayCollection

    names = new ArrayCollection(
    { “0”:”|6″, “1”:”Hugo Varas Valdez Zamudio” },
    { “0”:”|100″, “1”:”Evelyn Cardenas Ruiz” },
    ] );

    • Hillel says :

      Thanks for providing more details. I think your best bet is to override the checkIfUnavailable function and define custom logic to control which items appear as disabled.

  19. Curly says :

    This a great component! :)

    However, in order for us to use it, is it possible for you to put the class in a package? Because it does not have a package defined, this class is conflicting with an existing class we have in our product (with the same name) which is causing compilation errors.


    • Hillel says :

      Yeah, sorry about that… it was definitely a mistake. I’d suggest using the source and refactoring the class to have a different name.

  20. adam says :

    Is there a way to have the full dropdown shown as soon as you click inside the box to start typing? For my list I can click in the typing box and hit the spacebar to see all options, but i would like to see all options by just clicking in the box. Is this possible? Or is it possible at least to auto-insert a space any time it is clicked? great component by the way!

    • Hillel says :

      You can try calling showDropDown in a focusIn event listener. Although the focusIn event isn’t displayed in the MXML it does work.

      • adam says :

        thanks, i actually used “click” and then made a function for handling the click which used showDropDown. I also had the function use filterData() which seemed to correct a problem i was having with it only displaying the option that was selected if you tried to erase and start over again. for those new to flex like me, you can give your autocomplete an “id” for example ‘id=”autocomp”‘ and then inside the click function you can do “autocomp.” to see the list of function calls possible from the id.

    • Manav says :

      Hi Adam,

      I’m tyring to hit spacebar to see all options in the autocomplete, however can’t seems to get it working.

      Please let me know how do i go about getting this feature in my application.


  21. Przemek says :

    Hi Hittel,

    Thanks for sharing such a great component! :)
    I have a question related – is this possible for item selected from list not to become Button and remain a text string inside TextArea? It affects my QTP tests because one time given value becomes Button and the other it is TextArea. Will I have to patch sources?


    • Hillel says :

      Try setting… selectedItemStyleName=”none” allowEditingSelectedValues=”true” allowEditingNewValues=”true”

      • Przemek says :

        I does not seem to work, still changes to Button. Tried with v1.0 and v1.2, Flex 3.

      • Hillel says :

        Try manually including the styles from defaults.css.

      • Przemek says :

        Still button inside, now it just looks more like a normal button, but I can’t get rid of it.

      • Hillel says :

        I’m sorry, I’m not sure. If you send me a sample application which demonstrates the issue I’d happy to help debug it.

      • Przemek says :

        My problem is simple – when typing in AutoComplete I can see sugestions in the dropdown list. When I select item from this dropdown, a button with text on it appears inside AutoComplete. I don’t want this button, just need a simple text inside.
        By changing CSS or selectedItemStyleName property I just change the way that button is drawn, but still – there is a button inside and I don’t want it :)
        Is this enough explained?:)

      • Hillel says :

        Thanks, I understand now. Sorry… that’s just how the component works. If you set allowEditingSelectedValues to true it will enable the user to modify the values (we replace the Button on the fly with a TextInput). If you wanted to not use a Button you could modify the source code but that would be a pretty big change.

        Hope this helps

      • Przemek says :

        Thanks for a quick reply!
        Well, it’s already a big app using extensively your component, so we can’t risk implementing such big changes Thanks anyway for this great component and support :)

  22. Jeevan says :

    Hi ,

    I am searching for a solution where I can provide autocomplete and spellcheck with the same component. Is it Possible with this component?


  23. Mark says :


    We’re using your component on an important project and it’s implemented via the SWC file.

    2 styling questions:

    1. Is there a way to change the scroll bar skin used in the drop list menu?

    2. Is there a way to modify the hover and selected colors in the drop list menu?


  24. John says :

    I’ve got a need to have a AutoComplete that when the user clears the text in the box it shows all available. I cant seem to make the component do this. I can in Flex 4 using FlashCOmmanders but cant seem to figure out how to do that here. Any thoughts?

    • Hillel says :

      You can try adding an event listener for the searchChange event. You can then check if the searchText property is blank and call showDropDown().

  25. Igor says :

    Hi! I’ve understood why it’s happens, just need to set DataGridColumn (or AdvancedDataGridColumn) ‘editable’ property to ‘true’, otherwise it won’t be edit, as described above.

  26. abe says :

    For some reason I have to click the autoComplete control twice in order to start typing. hmmm… I don’t understand what I did to cause this behavior.

  27. toxn says :

    Great Component! We are using it in a huge Flex Application since 2009.
    Today I updated to version 1.2. Now I have some issues with the hightlight.

    It only works on 30% of the items in the dropdownlist. On the other ones the tags are not parsed correctly wich results in “HighlitedPartHere” shown as text in the component. Picutre:

    I dont know what am I doin wrong. I removed the the highlight on my dropDownLabelFunction and it woks like a charme. But highlightin is a great feature. Does anyone know what am I doin wrong?

    • Hillel says :

      I’m not sure it will solve your issue but I’ve resolved a different highlighting issue if there are multiple matches. To implement this code replace the highlightMatch function in with the following:

      public static function highlightMatch( string:String, searchStr:String ):String
      var parts:Array = [];

      for each (var part:String in searchStr.split( ” ” ))
      part = StringUtil.trim( part );

      if (!part)

      parts.push( “(” + part + “)” );

      var searchStrPattern:String = parts.join( “|” );
      var regExp:RegExp = new RegExp( searchStrPattern, “igm” );

      return string.replace( regExp, “<b><u>$&</u></b>” );

      • toxn says :

        After hours of research I found a solution myself. The problem was a compiler setting forcing the application to use the Flash Text Engine on mx controls. But our application requires FTE components for some text rendering. So the easiest way to solve this issue is to set the textFieldClass property on the DropDownItemRenderer (mx:Label) to “mx.core.UITextField”.

        Hope this clears things up. Thanks again for this great component

  28. Yariv Gilad says :

    Hillel Hello
    Quick question
    (I looked in the documentation and the asDoc and couldn’t find an answer…)
    I have a list of world addresses I wish to filter with the AutoComplete component
    How can I Favor matches in the dataprovider’s array that has the search term in the BEGINNING of the sentence rather then in it’s middle?

    When I type “Ba” in the AutoComplete input, the result list would be:
    – Bari. Italy
    – Barcelona, Spain
    – Ulaanbaatar, Mongolia

    This result is correct since my dataprovider array is sorted

    But when I type: “Lo” the result list is:
    – Barcelona, Spain
    – London, UK

    Notice it gave me Barcelona because it contains ‘lo’ but before London…
    This is because my list is sorted according to the first letter…

    So again, the question would be how to favor matches in the beginning of the word over those in the middle of a string…?


    • Hillel says :

      You should be able to solve this by implementing a custom sort function for your dataprovider which uses the search term to decide on the order.

  29. abe says :

    I’m having an issue where I need to click the search button twice initially to in order to call the initialize handler and perform the search function ; all subsequent searches can be executed with a single click of the same search button (which is the more favorable behavior for my application). Has anyone experienced such issues using this control?

    thanks in advance,

    • Hillel says :

      I believe other people have reported a similar issue. If you could create a sample app which demonstrates the issue I’d be happy to take a look at it.

  30. MArk says :

    This is exactly what I was looking for. Thank you for saving me hours of work. You are my hero!

  31. Dennys says :

    I want an autocomplete, multiselect component and this component can fulfill all my requirement. But for multiselect, if users want to select 4 related items (ex: AA1, AA2, AA3, AA4), he needs to search,choose, search, choose, … 4 times. Is it possible that user can choose several items in one search? Maybe use ctrl+click or use a checkbox.

  32. Philipp says :


    I’m having a problem using this component in my project. The problem is with the dropdown, it doenst seem to be formatted properly (showing html code) and sometimes even displays wrong values for what is typed.

    This is what it looks like:

    The problem seems to be in my project, because it works just fine in a new blank project. Have you got any idea what it could be? I already tried removing all the css in my project but it didn’t help.

    Thanks alot and i really hope you canhelp me because I really like this component :)


  33. Javid says :

    Thanks,clear() method works.

    How do I set selectedIndex like we set in combobox.selectedIndex;
    I use selectedItem=object which deosnt get set immedietly

    var object:Object = routeDp.getItemAt(index);
    autoearchR.selectedItem = object;




    trace gives false because the autosearchR.selectedItem is null.

    Please advice,thanks in advance.

  34. Kris says :

    Thanks for such an awesome component!

    I’m using the AutoComplete component as a DataGrid cell editor and it works great. Currently I can set the FlowBox cursor either by using cursor keys or clicking with the mouse. When I begin typing, the cursor moves to the bottom of the list where the item gets added. What I’d like to do is insert the item at the cursor position. Is this possible or can you give me some insight into how best to do this?

    Thanks in advance!

  35. Haim says :

    How can I vertically align the text in the search box?
    By default it is in the bottom of the text input box (both the prompt & the input text). Thanks!

    • Hillel says :

      The AutoComplete component contains a PromptTextInput class which contains a TextInput. You can access the main TextInput using the following syntax.


  36. macpapa says :

    I am having a strange issue with allowMultipleSelect. I can’t select multiple. .

    • Hillel says :

      Try calling the filterData function after setting the values in the arraycollection. It will call refresh on the underlying dataprovider which may help.

      • macpapa says :

        Thanks for the advise, but I am not sure what filterData function you are referring to. Should I call autoComplete3.filterData() after setting the arraycollection?

  37. Kadir says :

    We use AdvancedAutoComplete component for show our selections. Selections
    can be chosen with tree selection and many of item can be selected. While showing these multiple data(approximately 1000 data), we got “Error #1502: A script has executed for longer than the default timeout period of 15 seconds.
    at mx.core::Container/”

    How can solve this problem?
    Could you help us, please?


    • Hillel says :

      It obviously sounds like a performance issue. If you could post the full stacktrace it might help to track down the problem. If you haven’t done so already the profiler may be able to help you find the bottleneck.

  38. Kelly says :

    Thank you for all of your insights and help. I have found your posts very helpful.

    I am having trouble changing the font size of the selectedItem when using autocomplete. I am currently using selectedItemStyleName=”none”, but was hoping to make the fontSize align with the font size in the application. Is there a way to do this?


  39. Rodrigo says :

    Is it possible to set a field in the browserFields attribute, so it shows the content of a variable of an object that is inside of the object filling my dataprovider?

    for example:
    browserFields=”{ [{ field:’Object.variable’……..

    • Hillel says :

      I’m sorry, that isn’t currently possible. If you have an array of objects you could create a getter field, otherwise you’d need to use the source to make it work.

      • Rodrigo says :

        Ok, thanks for replying anywaw =). It would be a nice and useful functionality for the application I’m developing, since almost all objects have another one inside of them. Thanks again, I’ll try roaming the source.

  40. PKG says :

    Hi AutoComplete is very handy component, however I found one issue. AutoComplete does not work when dataprovider list(arraycollection) contains one value null into that.

  41. AnthonyB says :

    Hi Hillel,

    Is it possible to modify the “maxChars” value of the textInput used in the AutoComplete component ?

    We are using it but we would like to be able to change the maxChars value.

    We tried to access to the “ShorterTextInput” contained in the “PromptTextInput” but it’s null when the constructor is called. Moreover, the creationComplete method is never called, so I cannot modify the maxChars.

    Thanks in advance for your help.


    • AnthonyB says :


      I’ve finally succeeded in making it. I was not using the right component during my tests… Ahem…

      For information, to make it common to all AutoComplete components, I’ve added a listener to the creation complete event in the constructor. In the listener function, I’ve modified the maxChars :

      public function CustomAutoComplete()

      this.addEventListener(FlexEvent.CREATION_COMPLETE, handleCreationCompleteEvent);

      private function handleCreationCompleteEvent(event:Event):void {
      if (this.textInput != null && this.textInput.textInput != null) {
      this.textInput.textInput.maxChars = MAX_CHARS;

      It could be convenient to allow every AutoComplete components in the MXML file to modify this value, like the TextInput component.

      Thanks for making your awesome component open and free !


  42. Douglas McCarroll says :

    Hi Hillel,

    The ‘Download’ link on this page takes me to Adobe’s Add-ons page, but I can’t find this component there. I’ve searched for both “ListBuilder” and “AutoComplete”.

    Any chance you update the link? (We have a SWC but would like to get source code.)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 90 other followers

%d bloggers like this: