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,
Hillel

92 thoughts on “Flex AutoComplete: Almost there… (or so I thought)”

  1. 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.

    Thanks.

    Reply

    1. Neha,

      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.

      Reply

      1. Hi,

        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 🙂

  3. 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.*">
    <mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    var dp:ArrayCollection=new ArrayCollection([{‘item’:’pen’,’price’:’5′},
    {‘item’:’pencil’,’price’:’2′},{‘item’:’eraser’,’price’:’5′},{‘item’:’sharpner’,’price’:’5′},
    {‘item’:’eraser’,’price’:’5′},{‘item’:’ruler’,’price’:’5′}]);
    ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id="dataGrid" dataProvider="{dp}" rowHeight="40" width="500" rowCount="3">
    <mx:columns>
    <mx:AdvancedDataGridColumn dataField="item" itemRenderer="AutoCompleteRenderer"/>
    <mx:AdvancedDataGridColumn dataField="price"/>
    </mx:columns>
    </mx:AdvancedDataGrid>

    </mx:Application>

    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.*">
    <mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    var dp:ArrayCollection=new ArrayCollection([‘Aarti’,’Aman’,’Anthony’,’Amit’,’Aanchal’]);
    ]]>
    </mx:Script>
    <controls:AutoComplete dataProvider="{dp}"/>
    </mx:HBox>

    Reply

      1. I have tried it using your component as well. The same problem occurs.
        Please help me with some solution.

        Thanks.

  4. 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?

    Reply

    1. Gaurav,

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

      Hope this helps…

      Reply

  5. Hillel,
    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?

    Reply

      1. Thanks for your quick response!

        What I tried to do is the fetch the data from remote server and set dataprovider when user stop typing for a while (i.e. 1 second). Is it doable?

Leave a comment