Flex AutoComplete: Almost there… (or so I thought)

If you’ve come straight to this post I’d recommend checking out the first and second posts for this component for more info on using it.

Latest version

Here’s what’s new:

  • Created new demos: I’ve added two more demos which demonstrate some common ways to use the component. The source for the demos is included in the zip.
  • Added support for a horizontal multiselect: The previous version of the component had a multiSelect mode but it took up a fair amount of screen real estate. I’ve added a multiSelectLayout property which can be set to either “vertical” or “horizontal”. Vertical makes it behave the same as it used to, while horizontal enables you to select multiple items within the TextInput component. I’ve added this option to the demo. I’m still working on this feature, in the next version I’d like to change the style to make it look like the multiselect in Facebook and Mac Mail
  • Improved support for selecting items not in the dataprovider: The best practice to accomplish this is to add a keyDown listener to the component. If the user clicked enter then check if the text property is set and the selectedItem property is null
  • Fixed minor bugs: I’ve gone through all the comments on the blog and tried to address any open issues. I’m sure I’ve missed some things, if you’ve made a suggestion in the past which didn’t make it in to this release please re-suggest it and I’ll try to get it into the next version

One last thing, I’ve added the component to the Adobe Flex Exchange. It’s a relativley new component so it doesn’t have any rating or reviews. If you’re using this component and find it useful it’d be very much appreciated if you could rate it on the site (or even better… write a review).

Thanks very much,

Tags: ,

92 responses to “Flex AutoComplete: Almost there… (or so I thought)”

  1. Neha says :

    Hi Hillel,

    I am trying to use AutoComplete as itemEditor in an AdvancedDataGrid.It is not working properly.

    When there appears a scroll bar and I try to scroll down ,the typed text in the AutoComplete component disappears where in i want to retain it.

    Please help me with the solution.


    • Hillel says :


      I haven’t heard of that issue before, if you could send me a sample application demonstrating the issue I’d be happy to take a look at it.

      • Neha says :


        The following is the code for mxml:

        And the renderer that uses AutoComplete is:

        Now i facing two issues:
        1.First item is not selected.
        2.I want that the typed text should be retained while scrolling.

        Thanks in advance🙂

  2. Neha says :

    MXML code:


    And the renderer code is:

  3. Neha says :

    Hi Hillel,

    Plz ignore the previous post.

    MXML code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&quot; layout="absolute"
    xmlns:local="*" xmlns:controls="com.adobe.flex.extras.controls.*">
    import mx.collections.ArrayCollection;
    var dp:ArrayCollection=new ArrayCollection([{‘item’:’pen’,’price’:’5′},
    <mx:AdvancedDataGrid id="dataGrid" dataProvider="{dp}" rowHeight="40" width="500" rowCount="3">
    <mx:AdvancedDataGridColumn dataField="item" itemRenderer="AutoCompleteRenderer"/>
    <mx:AdvancedDataGridColumn dataField="price"/>


    Renderer code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:HBox xmlns="*"
    xmlns:mx="http://www.adobe.com/2006/mxml&quot; xmlns:controls="com.adobe.flex.extras.controls.*">
    import mx.collections.ArrayCollection;
    var dp:ArrayCollection=new ArrayCollection([‘Aarti’,’Aman’,’Anthony’,’Amit’,’Aanchal’]);
    <controls:AutoComplete dataProvider="{dp}"/>

  4. Gaurav Caprihan says :

    Hi Hillel,
    I’m currently trying to use the PromptTextInput component to capture barcode scans and pass the data to a function…I’m unable to locate an event that would wait for the scan to complete and only then pass it onto the function…What’s happening is that the moment the first digit is scanned, it fires off the datachange event…And idea on how this can be overcome?

    • Hillel says :


      The PromptTextInput contains a regular TextInput component, you may want to listen for the valueCommit event of the inner TextInput.

      Hope this helps…

  5. Gaurav Caprihan says :

    If I understand how valueCommit functions…is that the moment the user explicitly moves focus away from the textInput, the event is triggered.
    However, I’m trying to do away with the user explicitly having to use (for example) a tab key.
    What I want is for an event to trigger the moment a barcode is scanned and the serial number entered in the textInput box…that way, we can probably have a listener that can then call a handler function.
    Basically, do away with the user having to put down the scanner and then reach for the mouse/keyboard to press the enter or tab key.
    AFAIK, barcode scaners do append a CR+LF along with the codes that they scan.
    Is this possible?

  6. Yao says :

    Is there a way to make this component to update dataprovider on some pauses? Thanks!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: