AutoComplete

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.

914 thoughts on “AutoComplete”

  1. Hi Hillel,

    I am also getting similar issue as mentioned by some user here – http://hillelcoren.com/flex-autocomplete/comment-page-5/#comment-5503
    . I get multiple dropdown menus. My logic is after three character, I go to database and get user list and show dropdown menu to show. Each time I type more characters I go to database get filtered list and show dropdown. Everytime I get new dropdown menu and previous one also remain.


    < component:AutoComplete id=”users” width=”50%” height=”22? searchChange=”getUsers()”
    dataProvider=”{myPM.myUsersCollection}”
    allowMultipleSelection=”true” allowNewValues=”true” allowEditingNewValues=”true”
    dropDownLabelFunction=”dropDownLabelFunction” matchType=”anyPart” labelField=”email”
    selectedItemStyleName=”macMail” />

    protected function getUsers():void
    {

    var searchValue:String = users.searchText;
    if ( searchValue.length >= 3 ) {
    if ( myPM.myUsersCollection != null )
    myPM.myUsersCollection.removeAll();
    myPM.loadUsers ( searchValue )
    }
    }

    < component:AutoComplete id=”users” width=”50%” height=”22? searchChange=”getUsers()”
    dataProvider=”{myPM.myUsersCollection}”
    allowMultipleSelection=”true” allowNewValues=”true” allowEditingNewValues=”true”
    dropDownLabelFunction=”dropDownLabelFunction” matchType=”anyPart” labelField=”email”
    selectedItemStyleName=”macMail” />

    protected function getUsers():void
    {

    var searchValue:String = users.searchText;
    if ( searchValue.length >= 3 ) {
    if ( myPM.myUsersCollection != null )
    myPM.myUsersCollection.removeAll();
    myPM.loadUsers ( searchValue )
    }
    }

    /** This is invoked once results are fetched from database **/
    public function userListChanged(event:PropertyChangeEvent):void {

    users.hideDropDown();
    if ( (event.newValue as ArrayCollection).length > 0 ) {
    users.search();
    users.dropDownWidth = 300;
    users.showDropDown();
    users.dataProvider = new ArrayCollection ( myPM.myUsersCollection.source );
    }
    }
    public function dropDownLabelFunction( item:Object ):String
    {

    var string:String = item.lastname+ ” ” + item.firstname + “<” + item.email + “>”;
    var searchStr:String = users.searchText;

    var returnStr:String = StringUtils.highlightMatch( string, searchStr );

    if (users.selectedItems.getItemIndex( item ) >= 0)
    {
    returnStr = “<font color=’” + Consts.COLOR_TEXT_DISABLED + “‘>” + returnStr + “</font>”;
    }

    return returnStr;
    }

  2. when implementing the component to handle right to left languages such as “Arabic” the text become unreadable in the list.

    please if there is any fix for that just tell me.

    thank you

      1. thank you Hillel very much for reply 🙂
        I tried to change the direction and the layout direction its Ok with alignment in the search textInput, but the result list moved to out of search box like this.

        [________]
        [||||||||]

        and letters in list items are reversed.

        may you tell me what mx or spark class do result list implementing?

        Thank you

  3. in Action Script file i call a mxml object :
    private static var form:BasketsCreateMaintain;
    [Command(selector=”has_added_basket”)]
    public function addNewResult():void{

    form.autocomplete.selectedItem = baskets.basket.bsktId;
    //but when i debug here is null object reference

    }
    how can i set value for Aucomplete when I change between two forms.

    1. It’s hard to tell based on that code snippet, but try setting the selectedItem to baskets.basket (rather than bskId) or use the selectedItemId property.

  4. I have a multi-select-enabled autocompletion control. When I limit the height of the control it cuts off the upper or lower line of the component (depending if I scroll up or down)

    Here every thing is fine: http://k.min.us/jbczPA.png
    When scroll down upper line is cut off: http://k.min.us/jbc1XI.png

    Is this a bug or am I not using it right?

    Here is my Code:

    I don’t have any additional styling. I am using Flex4 and Adobe AIR 2.0

    Any help would be appreciated. Thanks a lot!

    1. Thanks for the pictures, they’re very helpful. I’m sorry but yeah, that looks like a bug. You may be able to fix it by removing the border from the FlowBox and setting it on the main AutoComplete class.

  5. Hi. I am trying to fix the height of the dropDownList to keep the same size, even when you are continuously typing. The dropDownRowCount is not working. The dataProvider can change sometimes on this case.

    I thought when you set the selectedItem, the “change” event would be dispatched, but it is no happening. Thanks

    1. The change event is fired when the user causes the component to change. If you set the selectdItem in code you’ll need to listen ot the valueCommit event.

      1. Can you help me on how to fix (set or tie) the size of the dropDownList, even if the dataProvider change it´s content? When I keep typing the word, the size of the dropDownList changes, and I don´t want that.

      2. I asked you some time ago about to fix (set or tie) the size of the dropDownList. You didn’t answer because is a dumb question? Sorry if was that, but I tried a lot of things and nothing works. dropDownRowCount was my first attempt but It only works the first time that the dropDownList shows on. When I keep typing the dropDownList decrease the size. Can you help me on that?

  6. i use autocomplete with dynamic data and
    i want to create a waiting icon when wait get data from server.
    how can i do that?

    1. Your simplest solution would be to use CursorManager.setBusyCursor(), I’m assuming though that you want the icon to appear in the component. You could add a loading spinner icon to the PromptTextInput class (where the clear icon is) and show it when you’re loading data.

      1. i had add a loading spinner and it worked, thanks u.
        But if i add a inlineButton and a spinner, so i can see spinner icon becos it inside the button. I try set style for inlineButtonCanvas.
        So can you suggest for me a way ?
        thanks.

  7. In the auto-complete text field, i add both an inlineButton and a Spinner. But I can’t see the Spinner because it’s always behind the inlineButton.
    So i want both the Spinner and the inlineButton to be displayed in the Auto-complete.

    I edit in FlowBox.xml
    line 109 :
    _inlineButtonCanvas.addChild( _inlineButton );
    _inlineButtonCanvas.addChild(textInput.spinner);
    line 319:
    _inlineButtonCanvas.width = _inlineButton.measuredWidth + 20;
    In the PromptTextInput.mxml :
    line 446:

    And inlineButton:

    And it works. But this method seems to be so “manual”, do you know any other way to do this? Thanks.

  8. I want to use the auto component with a very big dataprovider – 100000 items, it’s working, but it’s slow, how can i improve the performance?

    1. With such a large data set you may want to consider using a server-side approach. For example, wait for them to type a couple of letters and then search the server. There’s an example of how to do this in the zip file. The file’s called DynamicData.mxml in the examples folder. Otherwise, I’d make sure that any filter/label functions and renderers you’re using are as optimized as possible.

      1. Thanks, what is the limit – maximum number of items in the dataprovider that i can use in client side?

  9. Have you given any thought to upgrading this project to use Spark components/skins? The current implementation makes it almost impossible to modify the size and appearance of sub components such as the Multiselect.

    1. I’d love to but just don’t have the time right now (maybe in the future…), as a workaround I’d suggest using the source and modifying the components directly.

  10. After updating to Flex 4.5.1, I found that any AutoComplete component did not receive tab Focus when cycled over; it was skipped. Thus I needed to add hasFocusableChildren=”true” as follows:

    Does it make sense to have hasFocusableChildren default to TRUE?

  11. I made code modification to the AutoComplete component to allow adding items that are substrings of existing items in the data provider. I am using ant to compile the library. The modified .swc is linked the same way to the projects as the AutoComplete-1.1-Fx4.swc. However, when launching the application using the modified component, it throws the following error:
    Flex Error #1001: Digest mismatch with RSL http://localhost:85/flex/libs/ModifiedAutoComplete.swf. Redeploy the matching RSL or relink your application with the matching library.

    Can you provide the build file for this component? Any input on how it is built? Basically, I want to build the ModifiedAutoComplete library the same way as AutoComplete.

  12. Hi Hillel,

    First thing — Amazing work!!Thanks for sharing it!!

    Very recently, I’ve started to use your AutoComplete component. I just have one issue rather a doubt.I’d really appreciate if you could share your views on this. Is it possible to dynamically change the dropdownwidth depending on the length of the content in the dataprovider?
    I’ve been trying to re-size the width for a couple of days now. I am able to reset the dropdownwidth value properly. But, the re-setted size is not getting reflected on the screen. Could you please suggest me some ways to achieve this?

    Thanks in advance!!

    1. You’ll probably need to use the source to accomplish that. Currently the width is set in the showDropDown function in AutoComplete.mxml, you’ll probably want to update it’s width as the user searches instead.

      1. Yes! I did the same thing yesterday and it worked for me. I’m glad that I got it right.
        Thanks a lot Hillel – Your component is amazing!. Your blog is very informative! Thanks again!

    1. Great, thanks. The component doesn’t yet support 4.5. If you could send me a simple test application which demonstrates the issue I’d be happy to help debug it.

    1. That probably means there’s something particular in the way you’re using the component which is causing the issue, let me know if you’re able to track down what it is. Also, (if you haven’t done so already) it’s always worth trying to do a clean build.

      1. well i will try to fix it but i have absolutly no idea what it can be.

        I use the component in a huge project with thousends lines of code but always in the exact same way as i have it done in test project,

        Well so it seems there is any other libary that couses this problem.

        As soon as i have any fix i let you know.

        And if anybody out there has an Idea let me know 😉

  13. First of all, I love your component. I’m experiencing an issue using it in the Spark Form. Before I tinker with the code, are you aware of any issues with the AutoComplete component in the Spark form. If so, are you working on an update?

    1. I just read the comment about Flex 4.5 and yes this issue is in 4.5 (Specifically, if the component is in a Spark FormItem)

      1. Although the component doesn’t specifically support 4.5 I haven’t yet heard of any problems. If possible, I’d suggest testing it using Flex 4 to see if you still have the problem.

      2. It works fine in flex 4 and it works in 4.5 if it is not imbedded in the tag. Imbedding into the works perfectly.

      3. It works fine in flex 4 and it works in 4.5 if it is not imbedded in the spark:FormItem tag. Imbedding into the mx:FormItem works perfectly.

  14. Hi,
    Thanks for the component.
    I have a question/problem. I am using this component in my project, but I need a custom tooltip. I’ve overriden some of the code and I add a listener for MouseOver/Out (RollOver/RollOut) on the selectedItem object. On handle of the event, I show, using the PopupManager, a Canvas, which is my custom tooltip. The problem is that if I do that, the “click” on the selectedItem “breaks”. The selectedItem’s button stays as if pressed, even if I click on another one. Also the Click event stops populating and thus one of the other additional features I’m working on. The interesting thing: if I show a Control item (a Button or sth like that – I know it’s meaningless, but …) using the PopupManager – the problem is gone. It happens only if I show a Container item (a Canvas for example). Do you have any idea for the cause of this strange behavior?

      1. Hi Hillel, I am also facing a similar issue like Antonia. After selecting any item in the dropdown, I click on a button and have event-listener attached to it. If after this button click, I check “itemList.selectedItem” it comes out to be null . (itemList is my data provider).
        Can you suggest something for this ?

      2. Maybe you need to be checking autoComplete.selectedItem (or whatever Id you gave to the component). Also, you may need to call validateNow() on the component.

  15. Hi,

    I try to use your nice component in a Spark DataGrid as ItemEditor but I have this error :

    Type Coercion failed: cannot convert com.hillelcoren.components::AutoComplete@acf65c1 to spark.components.gridClasses.IGridItemEditor.

    Is there something I can do to fix this?

    Thanks a lot

    Antoine

  16. This is a great component.

    I wanted to let you know of an issue that occurs when manually calling showDropDown() when 1) there are fewer than the default number of items in the entire list and 2) the list must be displayed above the component because it is near the bottom of the application. What happens in this scenario is that the height of the list (_dropDown) is not in sync with the number of items in the list times the row height. In other words, the list ends up floating a ways above the input control. The way I fixed this in your code was to add the following at line 1313 of AutoComplete.mxml:

    if (dropDown.height != ((dropDown.rowCount * dropDown.rowHeight) + dropDown.borderMetrics.bottom + dropDown.borderMetrics.top)) {
        dropDown.invalidateSize();
        dropDown.validateNow();
    }
    

    If you have a better way of accomplishing the same thing, I’d love to hear about it! Thanks.

      1. Oops, I never saw your reply. I was (and still am) using the latest version (1.2), which was released this same day it looks like. Have you not been able to reproduce the issue?

  17. Hi, i have successfully implement this component in the data grid. but the problem is when ever i try to pass the free text back to the grid it doesn’t take it. any ideas.

    Thanks

    1. It’s hard to know exactly what the problem is, I’d suggest comparing your implementation to the DataGridDemo.mxml file in the examples folder.

  18. Hi Hillel, how do you prevent inputs that are not on the list? I’m setting allowNewValues to false but it seems not to work. I don’t know if I’m using it correctly. Please help. Thank you.

    1. Hmmm… I’m not sure, setting allowNewValues to false should do it. I’d check in the demo that the component works the way you expect it to. If you send me a sample application which demonstrates your issue I’d be happy to take a look at it.

      1. Hi Hillel, thank you for your quick reply. Sorry i failed to set the property clearSearchOnFocusOut=”true”, it was set to false, that’s why the search text was not being cleared. One more thing, I tried using The inline button control with AutoComplete component to mimic an autobox, but i can’t get the width of the button right. how i can i set the width of the dropdown button? thank you.

      2. The button should automatically size itself to match the image you’re using (assuming you’re using an image) but you should also be able to override the button’s width and padding properties. If you need to more control you could use the source and modify the updateDisplayList function in FlowBox.mxml.

    1. After the change is made you’d need to loop through the FloxBox’s children. If the item is a SelectedItem you’d then set the toolTip property on the button.

      1. Hi Hillel, sorry I tried what you said, the tooltip is showing but only for the selected item, can the tooltip be also shown for the items in the dropdown list? thank you so much for you help.

  19. Hi Hillel,

    Interesting component, and very useful. Is there an event that I can use to add code when user clicks on a selecteditem in the autocomplete component ?

  20. Has anyone had any luck using the autocomplete with FlexMonkey? I have a form with a bunch of autocomplete text fields and I want to do tests to make sure they got populated, but can’t figure out how to target them. Anyone been able to do this?

    1. I used FlexMonkey a while back. If I remember correctly it relies on the automationName property to access the components, you may want to try something like the following:

      autoComplete.textInput.textInput.automationName = “autoComplete”;

  21. I’m running into a strange issue where if the width of the autoComplete component is by saying something like:

    width=”{someVariable – 75}”

    the auto complete doesn’t show the text as it is being typed in. However, if i enter in a straight value for width (i.e. width=”150″) everything works fine.

    Any thoughts?

    1. I’m having trouble replicating this issue, which version of Flex are you using? If you could put together a sample application demonstrating the issue I’d be happy to help you debug it.

      1. @Hillel
        Thanks but i dont have any other way support for locale except spark text input so in your source code i am trying to update to use spark text input so user can enter in any language.
        when i run your demo it handles all the languages but when i am using same source code in my project its only work with English.
        Is something i am not doing right or i have to set in flex config.
        Please let me know thank you very much for your help.

  22. Hi Hillel ,

    I tried using the component in my project it works fine with autocomplete but when I try to use the AdvancedAutoComplete its not showing up the list that gets displayed above which contains the selected values as in demo,is there any propery that I need to set.And I dont want the text appearing in color to be displayed , it should be normal as it shows up in the demo ,but when I use it exactly how you you used it in the demo still i see the colorful selected text , what I need is a normal text .

    Can you please help me on this .

    Thanks
    Sid

      1. Hi Hillel ,

        I resolved the above issue but when I have the actionsMenu enabled and and selectionLayout as vertical , and Iam using canvas where I had this component with x and y values for auto complete component , I see that the x and y values of the actionsMenu are not getting updated .When I click on actions menu , the actions menu is appearing on top of the vertical list rather than in the autocomplete .It looks like the List is pushing the auto complete down but not updating the actions menu x and y value .

        Is there any solution to this issue.

        Thanks,
        Sid

      2. Hmm… in the demo I use the actions menu with the vertical layout and is seems to work fine. It must be using the canvas which is throwing things off. I think the easiest way to fix this would be to override the positionActionsMenu and monkey patch the code to work for you.

  23. HI,

    first i have to say thanks for the great component. There is one minor issue i try to fix at the moment. I have to click the Input twice to really set the focus. Is there a way to fix this? There is already a function ‘handleFocusIn’ in the AutoComplete.mxml but i can’t seem to find a solution for this problem. Any ideas are appreciated!

    1. I’m sorry, I’m not sure. I’m not able to reproduce the issue. It’s worth checking that you’re using the latest version (v1.2). If you could put together a sample application which demonstrates the issue I’d be happy to help debug it.

      1. I found out what the issue is. This only happens when i use a prompt, like this:

        var auto:AutoComplete = new AutoComplete();
        auto.name = “autoSuggestData”;
        auto.dataProvider = this.projectList;
        auto.prompt = “Prompt”;
        this.addChild(auto as DisplayObject);

        Now i clear the prompt with the first click and i have to click again to be able to enter a search term.

        For now i just don´t use a prompt and i am fine! Thanks anyway. The rest of your code works perfectly for me/us.

      2. Thanks for letting me know what the issue was. It obviously should work that way though, when I have some time I’ll try to look into it.

        Best,
        Hillel

  24. Hillel, I tried to use autocomplete in Flex 4 and for some reason the dropdown list of items don’t show up completely but I can select an item that is blank in the list and the correct item shows up in the entry field?? Is there some kind of styling issue?

    1. I’m sorry, I’m not sure. I’ve never seen this problem, do you have any custom styling or formatting. If you could create a sample application which demonstrates the issue I’d be happy to help debug it.

  25. Hello yor autocomplete is really complete however im having difficulties with the llok and feel… In my apllication all the textinputs and have a backgroud color and border style, but they dont apply to this component??? can you help me

  26. Hi, I’m using the AutoComplete in a form, that may pre-load data if available from the server:

    private function onServerResponse(event:ResultEvent):void
    {
    var xlMatch:XMLList = _xmlListColDataProvider.source.(id== _xlcServerData[‘id’].toString());
    if (xlMatch.length() > 0) {
    autoCompleteComponent.selectedItem = xlMatch[0];
    }

    and it is working.

    The AutoCompleteComponent is “cleared” every time the container (View) of the component is loaded:

    private function refresh():void
    {
    _xmlListColDataProvider= new XMLListCollection();
    autoCompleteComponent.removeAll();
    //autoCompleteComponent.selectedItemId = -1;

    retrieveServerData(); //this function gets the server data and if successful, it calls the onServerResponse() fx.
    }

    The thing is that the refresh() function does not really clear the selectedItem (the textInput is blank, and it does not even show the Prompt text).

    As you noticed, I tried with autoCompleteComponent.selectedItemId = -1 but it gave me lots of problems with the onServerResponse(). Now I don’t really know what does the removeAll() function does (no documentation on this) and the selectedItemId = -1 gives some problems on the valueCommit event.

    So my question is: how can I really CLEAR the AutoComplete programmatically? (if I manually insert a SPACE and then DELETE the space it behaves like I really want: i.e. shows the Prompt text and selectedItem == null)

    Thanks a lot!!!

    BTW, awesome component 🙂

  27. Setting the allowDuplicates=”true” attribute in your AdvancedAutoComplete demo tab works, so I can add multiple “Blue Green” “Blue Green” etc.

    However, then I can’t do multiple selection properly on those whereas the behavior is not broken if allowDuplicates=”false” (by default). Is there an attribute I’m missing or is this a bug?

      1. sorry, I should’ve clearer. I do the following:

        a) add “Blue Green” multiple times to the AdvancedAutoComplete tab. This is only possible if I edit the source code and set allowDuplicates=”true” in the AdvancedAutoComplete mxml object.

        b) click the third entry, hold “shift” and then click on the first entry (so I try to select all the “Blue Green” color entries in the autoComplete.selectedItems list)

        step b) doesn’t work properly. I can’t select more than one “Blue Green” entry.

        Is that clearer?

      2. Ah, gotcha… I think this is a limitation of the Flex list component.

        <mx:List allowMultipleSelection=”true”>
        <mx:dataProvider>
        <mx:String>test</mx:String>
        <mx:String>test</mx:String>
        <mx:String>test</mx:String>
        </mx:dataProvider>
        </mx:List>

  28. Hey Hillel,

    Love this component a lot. It is truly a great service to the community.

    Found a little bug and was wondering if you could suggest a workaround.

    When focused in the AutoComplete, backward tab (Shift-Tab) doesn’t work.

    Thanks.

    1. I am experiencing the same behavior. To eliminate as many variables as possible, I used the SWC that is included in the download rather than compiling the source.

      Here is how to recreate:

      1. Select a value from an autocomplete
      2. tab out
      3. using the mouse, click in the component in white space after the selected item’s text.
      4. try to shift-tab, nothing happens.

      Note that if you click on the selected item’s text or before the selected item’s text, you can shift-tab out of the component. However, you will have to press tab twice to do so.

      Here is my usage of the component:

      1. Follow-up: when I run the demo application on the website, I cannot recreate the behavior.

        When I compile the demo application locally (note that there is a typo on line 47 of EmailDemo.mxml) with versions 4.1 or 4.6 of the Flex SDK, I can recreate the problem.

      2. I was able to recreate the issue using Flex SDK 4.0A, which was the closest to 4.0 that I could find to download.

      3. I resolved this issue by making a few changes to AutoComplete.mxml.

        1) I added focusEnabled=”true” to the mx:Grid tag.
        2) I moved hasFocusableChildren and tabFocusEnabled from the init() method to the mx:Grid tag.
        3) I changed the value of hasFocusableChildren from true to false; I left tabFocusEnabled set to true.

        After making these changes, I cannot recreate the tab/shift-tab issues described by William and me.

        Note that I did not test the issue using the AdvancedAutoComplete as I don’t use that component at this time.

      4. Thanks for figuring this out. I’ll be sure to include this change (along with the one you emailed me) in the next release.

        Best,
        Hillel

  29. Does anyone else have problems getting this component to show in Design View? It’s working for me on another PC in design view, but another PC with approx. the same version of Flash Builder installed just omits the component entirely from design view.

    1. And the most odd thing is that I’m using the component 3 times on the same page. Two of them don’t display in design view (but work fine in the app), and one of them does. The difference is that for the two which don’t display, I’m setting the selectedItem (only one selection is allowed), and for the one that does display, I’m setting selectedItems (multiple selections allowed).

  30. Hi Hillel ,

    I found one issue with Advanced auto complete , we are having 2 canvases placed sequentially in a single canvas and we are having the Autocomplete in the first canvas and we have enabled the mutliselect and when we are selecting multiple values in the textInput the the flowbox grows vertically and the values are hidden behind the second canvas , but the dropdown works fine , it appears on top of the canvas 2 ,I tried to fix Z index for some of the components but it didnt do the trick ,

    Do you have any idea as to what is happening .
    Thanks
    Sid

  31. Hi Hillel ,

    I had some issue assigning values to the selectedItem property of autocomplete , my use case is to get the value from the backend and place the assigned value in the textInput of AutoComplete and selectedItem as well and in the same flow , I would get the value from the textInput of the Autocomplete and trigger a call to the backend , I have done the following

    autcomplete.searchText = value;
    autoComplete.selectedItem = autoComplete.searchText

    in later part of the code ,Iam trying to access the selectedItem of the autcomplete

    var text:String = autoComplete.selectedItem;

    But it seems like not working .Even though I assign the value to selectedItem , its still showing, even I have tried to dispatch change event after the assignment , weird thing is that when i assing the value and when i see the selectedItem , it shows null in the secondline of the code above .

    Can you please help me on this .

    Thanks
    Sid

    1. Two points:
      – You shouldn’t set both the searchText and selectedItem properties. To select an item only set the selectedItem property.
      – You’ll need call validateNow() in order to get the selectedItem property directly after setting it.

      Hope this helps…

  32. Hi,
    A small doubt.
    Suppose you type “abcd” in the control, it searches for the matches with “abcd” and then shows the nearest match as the first element highlighted in dropdown. So suppose the dropdown currently shows “abcd”,”abcd.1″, etc.. with “abcd” as the first highlighted element at top of dropdown. Suppose
    you hit a backspace, and then dataprovider gets updated. Suppose there is a match with exactly “abc”. However the drop-down doesn’t scroll up automatically to “abc” at the top of the dropdown, rather remains at “abcd”, and the scroller is at intermediate position , instead of at top. Instead I want the dropdown to scroll up and show “abc” as highlighted (which I can see it is anyways ,if I manually scroll up), – and the scroll should happen automatically. Any idea if this possible in autocomplete 1.2 and if so how ?

    Thanks, in advance.

    1. You should be able to extend the component and then scroll to the top if the user hits the backspace. Something like…

      override protected function handleKeyDown( event:KeyboardEvent ):void
      {
      if (event.keyCode == Keyboard.BACKSPACE)
      {
      _dropDown.scrollToIndex( 0 );
      }

      super.handleKeyDown( event );
      }

  33. Hi Hillel ,

    I am using the component in a Popup and when I select some values and close the popup and open the popup the values are not retained , I wanted to retain the values , is there any property which can retain the selected values .

    Can you please advice on this scenario .Thanks in advance

    Sid

  34. Hi Hillel ,

    I could resolve the pop up retaining the values , Is there any way that we can stop the flowbox grow horizontally or atlease stop the flowbox from growing and the text inside it need to be placed horizontally with out growing the flowbox horizontally

    Sid

      1. Hi Hillel ,

        I have set maxWidth and maxHeight , still it doenst work , is there any way that we can override the measurement logic of this component .

        Thanks
        Sid

  35. Hi Hillel,
    We have a logic that after three character, go to database and get data list, and subsequent character entry, we filter out the list from resultset and show the dropdown. The issue is that sometime the first item and the item on which mouse is rolled over in the dropdown become black, which is bit annoying.
    Do you know any solution for this?
    Thanks,
    Manoj

    1. I’ve seen things “go black” when there is a null error in the code for the item renderer. I’d suggest stripping down your view code to the bare essentials and seeing if you still see the problem.

      1. Does it have something to do with showDropDown() ? We are calling this on data received.
        Will it be fixed after adding condition if dropdown visible.
        private function dataRecievedForAC(event:CollectionEvent):void{
        if(event.kind == CollectionEventKind.RESET){
        if (this.compID.isDropDownVisible()){
        this.compID.hideDropDown();
        }
        this.compID.showDropDown();
        }
        After putting this code, problem seems to be solved.
        Any thoughts?

      2. Hmmm.. in that case it’s a different issue that what I had originally thought. Happy to hear you were able to workaround the problem (although I’m still not sure exactly why it fixes it though, or what you’re original problem even was).

  36. Hi Hillel,

    First of all, I’m using your component for some time now. I wonder, why don’t you provide a ‘donate’ function on your site to let developers contribute to your efforts? IBM charges $800 for their elixir component and another $600 for a mere update, which is absolutely ridiculous but many of us developers would be glad to contribute a little to such a useful componenten like your autocomplete!

    Anyway,

    I have a question: I’d like to customize the renderer of the component as follows: I’m selecting one or more items from the dropdownlist. They appear in the input field as strings. I’d like to add a checkbox next to each entry. Is there a way to achieve this?

    Many thanks,

    Dany

    1. Thanks for the kind words.

      That should be possible, you’ll need to use the source. You’d want to start by modifying the SelectedItem.mxml class and adding your checkbox to it. You’d also need to add a setter/getter to AutoComplete.mxml.

      Hope this helps…

      1. Ok, that’s interesting. But what if I want to use 2 different SelectedItem classes?
        Wouldn’t the be interesting to implement a ‘selectedItemClass’ property to AutoComplete? This way, you could not only tell how the dropdown list shows it’s items but also how the selected item is displayed, just by making a new SelectedItem class which extends SelectedItem.

        Dany

      2. Hi Hillel,

        I managed to do it as simple as possible:

        1. In the AutoComplete class, I added a property:
        private var _selectedItemClass:Class = SelectedItem;
        (+ getter and setter)
        2. Around line 1030, I changed:
        var selectedItem:SelectedItem = new SelectedItem();
        into:
        var cf:ClassFactory = new ClassFactory(_selectedItemClass);
        var selectedItem:SelectedItem = cf.newInstance() as SelectedItem;

        That’s all. Now I can set the property of selectedItemClass to my own class (which extends SelectedItem). This is a sample:

        package
        {
        import com.hillelcoren.components.autoComplete.classes.SelectedItem;

        import flash.events.MouseEvent;

        import mx.controls.CheckBox;

        public class MySelectedItem extends SelectedItem
        {
        override public function MySelectedItem()
        {
        super();
        }

        private function handleCBClick(event:MouseEvent):void
        {
        //update the item object
        }

        override protected function createChildren():void
        {
        super.createChildren();

        var cb:CheckBox = new CheckBox();
        cb.label = “Wijzig”;
        cb.addEventListener(MouseEvent.CLICK, handleCBClick);
        cb.selected = item.edit;
        addChild(cb);
        }

        }
        }

  37. Hillel,

    An interesting issue has arisen. At this time, we use your Flex3 library in production but Flex4 in development. In one of our data providers, there is an item with a greater than sign. In the version 3 code base, the greater than sign displays properly. In the version 4 code base, it is displayed as >.

    Neither the label function nor the drop down item renderer seem to have changed significantly between versions. Can you think of a reason why > is not displayed as > in the latest version?

    Thanks,

    Mike

    1. I tracked the problem to the line in the defaultDropDownLabelFunction() that invokes StringUtils.hightlightMatch. Before any characters are typed into the text input, the searchText is a non-null, zero-length string. The call to highlightMatch results in being inserted between every character. Because of that “>” doesn’t really exist in the text so it can’t be converted.

      To overcome this problem, I put in a test to determine if searchText is a non-empty string. If so, call hightlightMatch. If not, I set returnStr to the value of string.

      Mike

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s