Flex AutoComplete: Version 1.1

It’s been well over a year since I released the 1.0 version of the component. Since then I’ve received countless emails/comments with feature requests and bug reports. This new release addresses all of the major issues.

Latest version

Here’s what’s new:

  • Full support for Flex 4: The component now supports Flex 4 100%. The demo has been rebuilt using the Flex 4 SDK
  • Added allowEditingSelectedItems property: You can now enable making changes to items once they’re selected.
  • Added delimiter property: When allowing the user to select multiple items you can now specify which character to use as the delimiter.
  • Added clearSearchOnFocusOut property: This enables specifying whether the search text should be cleared on focus out
  • Added clear method: Makes clearing the selection much simpler
  • Better overall usability

In addition, I’ve also fixed a number of critical bugs:

  • Fixed problems when binding to the AutoComplete’s values
  • Fixed issue where setting selectedItem multiple times would fail
  • Fixed problem where allowDuplicates didn’t works for objects
  • Resolved issues when using with Validators
  • Improved garbage collection performance
  • Resolved issues when using an XMLListCollection as the dataProvider
  • Does a better job handling invalid data
  • Fixed issues related to using the tabIndex property
  • Other bug fixes and tweaks..

Best,
Hillel

55 thoughts on “Flex AutoComplete: Version 1.1”

  1. Hello Hillel,

    I was wondering if your component supported copy and paste of CSV values.

    If not, which part of your component would you suggest to start with to add a feature like this?

    Enjoy,

    Dov

    Reply

    1. Dov,

      It has basic support. For example try copying/pasting this into the demo

      blue green, brick red

      However, the following doesn’t work correctly.

      “blue green”, “brick red”

      To enhance this functionality I’d made changes to the handleFlowBoxChange function in AutoComplete.xml (as that’s where we split up the string into its pieces).

      Best,
      Hillel

      Reply

  2. Congratulations on the new release!
    I can’t seem to get the tabIndex working. I have set multiple advancedautocomplete components with tabIndex = 1, tabIndex = 2 etc but it doesn’t seem to tab between them. Maybe I have done something wrong???
    Thanks 🙂

    Reply

      1. Using flex 4 and using the source. Testing using multiple advancedautocomplete components.

        Thanks!

      2. csr,

        There are a couple of changes required to the source to switch from Flex 3 to Flex 4. Do a search for “Flex 4” and you should see all the changes required.

      3. I using flex 3 but i can not get tabindex for autocomplete. Please give your advise. Thanks

  3. I love this component!

    Wanted to let you know about a minor issue I ran into, and how I solved it. The scenario is:

    1. AutoComplete has a small number of values, say 2.

    2. AutoComplete is at the bottom of the visible page, so when a dropdown is created, it’s positioned above the AutoComplete.

    What happens, is the autocomplete is positioned before the Dropdown is shrunk to handle only 2 items, so the Dropdown is way above the Autocomplete.

    To solve this, I added the following in the AutoComplete component:

    In the createDropDown function, I added the following line when setting the properties of the new _dropDown:

    _dropDown.addEventListener(Event.RESIZE,dropDownResizeHandler);

    I also then added the following private function:

    private function dropDownResizeHandler(e:Event):void {
    positionDropDown();
    }

    Ths basically solves the problem by repositioning after any resize of the dropdown.

    As I said before, great component! It’s been very useful in the Flex apps I’ve put together!

    Jon Keener

    Reply

      1. The only odd issue I ran into was that when I did a dropdown item renderer as a VBox, it didn’t calculate the height of an mx:text in my VBox. If I set the height of the mx:text to “18” then it worked fine, or if I changed it to be a label.
        Example:

        <mx:VBox>
        <mx:HBox>
        <mx:Label id="nameLabel"/>
        <mx:Label id="longNameLabel"/>
        </mx:HBox>
        <mx:Label buttonMode="true" mouseChildren="false" id="linkLabel" styleName="Link" click="goToProject();"/>
        <mx:Text width="100%" height="18" id="terms" />
        </mx:VBox>

        In the example if I don’t give text an explicit height, then it’s lost. Not sure if that’s a bug with Autocomplete or with Flex. I’m on Flex4.1 SDK btw.

  5. Hello,

    I’m trying to use the component with an arraycollection with strings for provider, and allowNewValues=”true” and STYLE_MAC_MAIL. When creating new items using comma, it shows the items as “comma-free” but the itens in selectedItems have comma at the end;

    Reply

    1. Jhonny,

      That clearly sound like a bug, I’ll have a fix in the next release.

      For now you can either modify the source or strip off the ending commas.

      Reply

  6. Hillel,

    I resolved a situation today in the prior version of your component that I see, by running the demo for version 1.1, still exists.

    If the component exists in a container that can be scrolled via the mouse wheel and the user does scroll that container while the drop down is displayed, the drop down “detaches” from component and becomes free floating.

    To fix this, I reviewed the ComboBox component source code and made these modifications to your source code:

    In createDropDown(), I added:

    _dropDown.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseOutsideHandler);
    _dropDown.addEventListener(FlexMouseEvent.MOUSE_WHEEL_OUTSIDE, mouseOutsideHandler);

    I then added this method:


    private function mouseOutsideHandler(event:Event):void {
    if (!isDropDownVisible()) {
    return;
    }

    if (event is MouseEvent) {
    var mouseEvent:MouseEvent = MouseEvent(event);
    if (mouseEvent.target != _dropDown) {
    return;
    }

    if (!hitTestPoint(mouseEvent.stageX, mouseEvent.stageY, true)) {
    hideDropDown();
    }
    } else if (event is SandboxMouseEvent) {
    hideDropDown();
    }
    }

    Mike

    Reply

  8. Hillel,
    I have set the selectedItem for the control to an Object which all works well. My problem is if the selectedItem gets changed in code elsewhere, this binding is not picked up. How can I get selectedItem to Bind and update if there is a change?

    Many thanks! 🙂

    Reply

    1. OK…. my bad.. I was clearing the selected item which another autocomplete was pointing to the data. Effectively in set selectedItem it checks if (_selectedItem != value). If I comment this out it works for me as null is valid.

      Thanks

      Reply

  10. Hillel,

    I am wondering the reason to make the defaultFilterFunction private. In my case, it might be nice to be able to still access the default function after putting my own additional filter on the data. For example, if I have a list of People objects in my model, I might want to filter out only those that are of type=user on a particular AutoComplete input. I would love to be able to first check for that and if true, pass it along to the default filter to hand the string filtering:

    private function userFilterFunction(item:Person,searchString:String):Boolean
    {
    if(items.type != ‘user’) return false;

    return autoComplete.defaultFilterFunction(item,searchString);
    }

    Does this make sense? Perhaps there is a reason NOT to do this, but it seems convenient to me when just needing to add a simple criteria or two to the filter. I would love to hear your thoughts.

    Thanks for a wonderful component!

    Kevin

    Reply

    1. Kevin,

      For the example you provided, I’d assume you could just use the filterFunction property (there’s an example in the documentation, search for filterFunction).

      Reply

      1. Yes, I know I can replace the defaultFilterFunction by assigning my own to the filterFunction property, but then I loose some of your nice built in match functionality (unless I just want to copy/paste the code into my custom filter).

        What I am suggesting is that it would be nice to be able to still access the defaultFilterFunction so that it is easy to add filter criteria on top of the default rather than in place of the default. All that is required (as far as I can tell) is to make the defaultFilterFunction a public rather than private function.

        Does that make sense?

      2. Kevin,

        I’m sorry for assuming that you hadn’t figured out how to use the filterFunction property, I understand you now.

        Yeah, I’m sorry… in that case you’d need to copy/paste. For now you can use the source and modify it, I’ll make the function protected in the next release.

        Best,
        Hillel

  11. Hillel,
    I seem to be having trouble with setFocus. I want to setFocus to the AdvancedAutoComplete after the form is created. eg in the creationComplete, but it does not seen to do it completely. It highlights it like focus but there is no flashing cursor reading to type. Is anyone else seeing this.

    Cheers

    Reply

      1. Thanks Hillel,
        yes I put just a plain textInput on the form and setFocus to it it works. If I setFocus to the advancedAutoComplete then it does not seem to get focus with flashing caret. It gets highlighted but no cursor.

        Cheers,
        czr

      2. czr,

        I’m sorry for the delay in responding. I’m able to replicate this issue, but haven’t yet been able to track down the source. I’ll try to have a fix for it in the next release.

  12. Hillel,
    Quick question:

    I ran into a small issue with the errorString property in the AutoComplete component. Basically, I was clearing it, then assigning a new value if the field was blank. However, the behavior I saw was that the clear wasn’t immediately taking place, so the if statement wasn’t catching it correctly. My code below isn’t what I’m running, but is representative of what is happening (I’ve got a general function that clears all errors on form, then runs validation which repopulates the errors) :

    autocomplete.errorString = ”;
    if (autocomplete.errorString == ”)
    {
    autocomplete.errorString = ‘new error’;
    }

    looking at the AutoComplete.mxml, I see that the get function for errorString is returning via the following:

    return flowBox ? flowBox.errorString : null;

    by changing this to return _errorStr; this works as expected. My concern is what I might be breaking elsewhere. Any idea offhand why you were not returning the _errorStr var which is used in the errorString setter?

    Thanks! I love the component!

    Jon Keener

    Reply

  13. Hello!
    This is really a great component! Thank you very much!
    But I could not find out if I can use it with asynchronous data loaded from a webserver.
    Example: When the user enters three letters the entries for the autocompletion-list will be loaded from a webserver. I can not load all the data first and then assign an ArrayCollection to your component because it’s too much data. I have to load the data dynamically after the user inputs some letters.
    Is this also possible with you component?
    Thank you very much in advance!
    Adrian

    Reply

  14. Hi Hillel,
    This is really very useful control..
    I am not able to resize the textInput. I change the height of it but this will again change to actual height. can you please suggest me what I am missing.

    Thanks in Advance.
    Regards,
    Bhumisha

    Reply

  15. Hillel, this is a fantastic component! Thanks so much!

    I’m noticing that the list elements that aren’t currently highlighted have a transparent background which allows the form underneath to be seen. Is there anyway to force an opaque background on the list?

    Reply

  16. Hi Hillel

    Is there a way to use a custom itemRenderer? I’ll give an example: in the autoComplete, I add people that get access to something. After their name, I’d like to add a comboBox with choices ‘read’, ‘write’ and ‘read/write’. So every person I add should have this combobox for easy choosing. Is this possible?

    Thx. Dany

    Reply

    1. Dany,

      I’d suggest checking out the source code for the color chooser demo, it’s pretty similar to what you’re trying to accomplish. It’s available in the examples folder of the download.

      Reply

  17. Hello Hillel,

    Great component I like like like.

    However I wanted to ask you for a hint. If for example I want to load the Autocomplete component with some values when my application initiates, where should I try this?

    I tried setting text property, e.g text =”test”, in the Autocomplete component itself but it does not seem to work. any idea?

    Again thx for such a great work.

    Reply

    1. AshRoc,

      You can use either the selectedItem, selectedItemId or selectedItems properties (depending on your use). The documentation provides more detail.

      Best,
      Hillel

      Reply

      1. This works like a charm. I actually using the AutoComplete feature with the Skinning and all for email validation (just the way hotmail does it for its mail address input field).

        However is there a way in case I need to modify an item in the field, is there a way to make it editable upon selecting it?

      2. Sorry, there isn’t a “make editable when selected flag”. It should be possible though, the SelectedItems are just children of the FlowBox class. This would probably be easier to do using the source.

  18. Ok I will try it and let you know of ayn development.

    I also tried to set horizontalScrollPolicy, verticalScrollPolicy =”on”…doesn’t seem to respond. The text box resizes while it gets more items into it. Anything am missing here?

    Reply

  19. Is there also a way to get the coordinates of the selected item at least..I can do a McGuyver from this stage.

    Reply

  20. Hy there

    I finally come round to migrate my project to flex4. However, I am facing a new issue with the tab focus:

    I have a recipients field (autocomplete) and a message field. I can now click on the recipient and tab to the message, but I can’t tab back to the recipient.

    Since I had to do quite some refactoring for migrating from flex3 to 4, I cant be 100% sure that this really is a flex4 issue.

    Any help would be appreciated

    Reply

  21. Hello Hillel,

    For the itemrenderer in the autocomplete component…I wanted to know how you are setting the variables widths for the items as I can see in the list, the width of the ItemRenderer is set to the width of the data. Can you tell me where you are setting this?

    Thanks & Rgds
    AshRoc

    Reply

  22. Yes,
    For example, lets say the component has 2 items namely : abc@hotmail.com, xyz@hotmail.com and abcdefghijklmnop@hotmail.com

    As these some elements are of shorter length while the 3rd element is longer, the itemrenderer automatically adjusts its width to suit the show the full length of the item.

    I wanted to know where actually you are catering for the width of the itemrenderer.

    Hope am clear enough above.
    Thx

    Reply

    1. If I’m understanding you correctly, the width of the selected items is set automatically as I’m just using a Button to display it (the IconButton in SelectedItem.mxml)

      Reply

  23. Hi Hilel, I am trying to use the auto complete component in a mobile project but i am getting compilation errors, the component works great with the web project, is there any way that i can use this in the mobile project. Thanks

    Reply

Leave a reply to czr Cancel reply