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. G’day Hillel,

    AutoComplete has been working great for us. Never got around to adding the drag to select support I was planning to, sorry about that.

    Just wondering about an apparent bug we hit on:

    In commitProperties, when selectedItems has been changed, you loop through _dataProvider.list. For some reason the list property of our ArrayCollection is always empty, even when there’s a valid source (Array, plenty of elements), and the AC works properly for normal use. Removing the .list so the loop becomes simply

    for each (item in _dataProvider)

    makes everything work for us.

    This is on line 338 of AutoComplete.mxml in version 1.0.

    Perhaps we’re setting up our ArrayCollection incorrectly? I’ve tried different methods, even assigning to ac.list rather than creating it with new ArrayCollection(sourceArray).

    Cheers,
    Charlie

    Reply

    1. Charles,

      Yeah, I’ve noticed that as well. I think this is a Flex bug. I’m considering changing the dataProvider back to being an ArrayCollection (rather than IListViewCollection) as that seems to eliminate the issue. Sorry if this caused you any trouble… it had me stumped for a while.

      Reply

      1. Hrm, interesting.

        I did some more testing to find the exact cause of the problem.

        I was wrong about the cause: the list property isn’t null, it just can’t be traversed using a for each (…) loop.

        ArrayList does not implement nextValue():*, so for each (…) does nothing in this case.

        I assume removing the .list will be incorrect for the general case, because the filterFunction may obscure items that should still be examined for purposes of setting selectedItems. For us it seems to work fine, but then we’re only ever setting the selectedItems at component creation.

        The correct way may be to use an explicit numbered for loop and access the list elements using getItemAt(i).

        Charlie

      2. Hi Guys, this stumped me as well.

        How about:
        var cursor:IViewCursor = _dataProvider.createCursor();
        while(!cursor.afterLast) {
        var item:Object = cursor.current;
        if(item.hasOwnProperty(_keyField) && item[_keyField] == _selectedItemId) { _selectedItems.addItem(item); _selectedItemId = 0;
        break;}
        cursor.moveNext();
        }

        Will I break anything by commenting out the foreach and replacing it with the above.

        Thanks for publishing such a great component

  2. Hi Hillel,
    I am trying to style/skin the actual drop down list, but I cant seem to find the right properties.

    Anything changed in the defaults.css or CustomSkin.as only changes the actual item in the autocomplete, and not the options in the dropdown.

    Any pointers would be greatly appreciated.

    Reply

  3. Hi,

    First off, thanks for creating this component. It’s very useful! I am running into an issue that I hope you might be able to help with.

    I have an ArrayCollection filled with objects that I am binding to both a DataGrid, and the AutoComplete component.

    I am running into an issue where if I use the AutoComplete component, then switch back to the state where the DataGrid exists, the DataGrid now only contains the selectedItem from the Autocomplete.

    I’ve even tried creating 2 instances of the original ArrayCollection and binding each component to separate DataProviders, but the problem still occurs.

    I’m unsure of why this is happening. Any ideas? I can provide the code in an email if that would be more helpful. Thanks.

    Reply

    1. Narin,

      If I’m understanding you correctly, I had the same issue. To solve it I extended the AutoComplete component and overrode the setter for the dataProvider.

      override public function set dataProvider( value:ListCollectionView ):void
      {
      if (!value)
      {
      return;
      }

      var source:Array = ArrayCollection( value ).source;
      super.dataProvider = new ArrayCollection( source );
      }

      Reply

  4. Hi hillel,

    thank you again for the released version.

    I’m using your Copponent on an ArrayCollection. i have to filter 5 rows from a DataGrid. Your Component fit exactly.
    I one of the rosw, lets say, are 20 entries with value “ABC” and 30 entries with “CDE”. if I’m typing in A, i can see all 30 entries in the dropDownList.
    Is there a way to remove multiple entries from the dropDown, so i can see only unique entries?

    thanks
    Frank

    Reply

  5. Hi Hillel,

    Great component the AdvancedAutoComplete…however I have noticed something. If I set the dataProvider and the selectedItems, I will see some items in the control. However if I now use the browser (or the auto-complete textinput) to add a new item, everything disappears.

    I think this happens because the items in the ArrayCollections for the dataProvider and selectedItems are actually different items in memory, since they came from different sources. Any idea how to contour this? I guess this is because Flex doesn’t have an implementation of equals() like Java does.

    Thanks
    Dimitrios

    Reply

    1. Dimitrios,

      I’m having trouble replicating your issue. Here’s a sample application which demonstrates using the selectedItems propery.

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:components="com.hillelcoren.components.*">

	<mx:Script>
		<![CDATA[

			import mx.collections.ArrayCollection;

			[Bindable]
			private var _data:ArrayCollection = new ArrayCollection( ["one", "two", "three"] );
			
			[Bindable]
			private var _selected:ArrayCollection = new ArrayCollection( ["one"] );
			
		]]>
	</mx:Script>

	<components:AdvancedAutoComplete allowMultipleSelection="true"
		dataProvider="{ _data }" selectedItems="{ _selected }"/>
		
</mx:Application>
      Reply

      2. Dimitrios,

        I’m unable to replicate this problem with objects. If you could send me a sample application which demonstrates your problem it’d be very helpful.

        Thanks

  6. Hi Hillel,
    this is great component. i want to add one thing in this component. can you help me to do that. when i click in the AutoComplete box it should be display all lists (type text is empty string). i don’t know how to do that.
    please help me

    Reply

    1. Ramc,

      You could add an event listener for the click event, then inside the handler function call the showDropDown method.

      Reply

  7. Hi,

    In the Browse/List Builder window, you have 2 columns (Items and Selected), is there a way to adjust the width of those two columns. My items’ labels are long.

    Reply

    1. Tmv,

      You could extend the ListBuilder class, change it’s width and then set your custom class in the ListBuilderClass property.

      Reply

  9. Quick question. How can I set selectedItemStyleName in as code? I’m creating fields dynamically and I was trying to simply set:

    acField.selectedItemStyleName = “customSkin”;

    but it doesn’t work.

    Thanks.

    Reply

    1. Adameq,

      It’s a style so you’d want to do something like…

      acField.setStyle( “selectedItemStyleName”, “customSkin” );

      Reply

  10. hi hillel, very cool component.

    is there any way to change the offset of the buttons? when i type something in and it gets autocompleted it always has a slight but visible offset to the right and bottom. tried to apply negative values to the padding of the flowBox thing but no success 😦

    cheers,
    kris

    Reply

    1. Kris,

      I’m not sure exactly which offset you’re referring to. If you could send me an annotated picture I’m pretty sure I could help you get rid of it though.

      Reply

  11. I am using your beta version 4 autocomplete

    I have the following issues

    1/ browse, list builder, on ok, the setFocus throws null values, I tried commenting out the serFoucus call, but then the new values don’t show until I click there
    (BTW using inside an AdvancedDataGridColumn)

    2/ cannot get prompt to show, using your example setups pretty well exact, except that it is flex 4 (letest) and AdvancedDataGrid

    3/ cannot get menu to work, it pops up but script errors

    Let me know if you have an update to your version 4 beta and I will retest these issues

    Also thanks so much for doing this, it is simply the greatest little component, solves my real world problem very elegantly

    Reply

    1. Keith,

      First off thanks for your feedback. I haven’t tested it thoroughly in Flex 4 but these are some pretty obvious issues (which I’m pretty sure I didn’t see when I was working on it). Can you please make sure you’re using the latest stable Flex 4 build. I’m sorry though, I don’t have the time right now to debug these issues. If you’re interested, I’d be happy to assist you in figuring it out.

      Sorry I can’t be more help. I’m trying to get the next Flex 3 version out the door (it’s going to be a little while until I have the time to focus on Flex 4).

      Reply

  12. Hillel

    I have it working satisfactorly enough in the lastest non stable build of flex 4 which I am forced to use for other reasons.

    I can wait until you have time (sometime in the new year perhaps), to look further at flex 4 version.

    Flex 4 is like quicksand right now, so I am very happy that you had at least something I could use.

    The multiple selections, plus new items is simply FANTASTIC!!!, and I have that working perfectly…

    Reply

    1. Keith,

      Happy to hear that you’re ok waiting, I definitely plan on spending more time on the Flex 4 version in the coming months.

      Best,
      Hillel

      Reply

  13. Hi, First, i think it is the most powerful component among other thx. But i am having a problem 🙂

    As i type, elements in the dataprovider is shown as dropdown but when i press Enter, selection is not performed. If i delete last element and (drop down is shown) then press enter item become selected.

    if allowNewValues property is set to true, i select from drop down by pressing enter item is not selected in the second Enter item become selected.

    (My class extends from AutoComplete and in the inititialize method it sets its dataprovider.)

    Am i missing something?

    Best..

    Reply

  14. Hillel,

    One of the last modifications to the source is causing a little problem.
    The new version of highlighMatch in StringUtils does not handle case insensitiveness correctly with accented characters, for example é-É, á-Á.
    It seems like RegExp is the root problem, the “i” option does not work with these characters. You can test it here as well: http://ryanswanson.com/regexp/

    A workaround could be to use the previous version of highlighMatch with a little modification.

    Andras

    Reply

    1. Andras,

      Thanks for pointing that out.

      There’s actually another problem with the current implementation, if you set the matchType property to word and search for letter s in “susan” it would highlight both s’s.

      It’s on my list of things to fix up…

      Reply

  16. Hi Hillel,

    great component, i have one question
    how can i put the actionsMenuDataProvider above, not below? i want that the browse function is opened above the text input in clear ^^

    thanks for help 😉

    Reply

  17. I have the fix for getting prompt to work when autocomplete is used in a DataGrid / AdvancedDataGrid in flex 4.

    Turns out the issue has nothing to do with flex 4.

    When usinging autocomplete as a itemEditor component for a datagrid column, be sure to set both itemEditor and itemRenderer to that compononent, otherwise prompt won’t work.

    That being said the current code gives ugly result drawing an unessary box around prompt, I modified
    autoComplete.mxml to set no border as follows

    perhaps that should be a paramater

    Reply

  18. Hi – Thanks for gr8 components, i having a urgent issue and i need your help to fix the problem.After search is done, it show an item like say example
    yahoo.com, recent activity ,closed 360*,here problem is when i do the backspace button, component removed whole text, my requirement is when i press backapce, it only remove one char not whole text, Please help me?

    Reply

  19. Hi,

    First and foremost thanks for your good job!

    I have a question about the autocomplete dropdown. Is it possible to display all the list if nothing is entered (as a normal dropdown) and then filter as it is done now when some characters are entered ?

    Thanks,
    Kim

    Reply

    1. Kim,

      At the end of the documentation there’s an example which discusses something similar using the InlineButton property. Maybe it’ll help…

      Reply

  20. Hi Hillel, great job!, I’m trying to use your component in my application and I get an error “Access of undefined property Consts” four times…

    Can you please tell me what I’m doing wrong?

    Reply

  22. Hi Hillel, great work with the component. I am having couple of issues using the AdvancedAutoComplete as an itemeditor in a DataGrid. Both have to do with the Browse feature:
    1) A null exception is getting thrown in handleFocusIn of AutoComplete when I select a row from the browse grid. This seems intermittent. Keith mentioned it in previous post relating to Flex 4, but I am using Flex 3.
    2) When I am able to successfully select an item in browse, the autocomplete does not show the selected value.

    Thanks
    Leo

    Reply

    1. Leo,

      I’ve had a lot of trouble using the the ActionsMenu feature in a DataGrid b/c of how the grid handles focus. At one point in the app I’m working on I resorted to manually creating the component when the user clicked on the cell (making it look like it was an editor). In the end the specs changed so I didn’t need to use this approach, it worked but it was pretty ugly/complicated.

      Reply

      1. Hi Hillel, am not sure I understood your explanation. I was not using action menus, just the browse feature. Are you saying the browse feature cannot be used if the advancedautocomplete is used as an itemrender/editor in a grid? Thanks Leo

      2. Leo,

        I’m sorry, I assumed you were using the ActionsMenu to enable the user to browse. Sadly it’s the same problem, when the browse window opens the grid loses focus which causes it to destroy the ItemEditor.

      3. Leo,

        I thought of an approach which *may* work for you. The issue I had was that when the user clicked the ActionsMenu button the AutoComplete would disappear right away (not good), since you’re using the Browser that’s less of an issue. Theoretically you could capture the selected item from the Broswer, set it in your DataProvider and then tell the grid to re-edit that cell.

        Let me know if you need help implementing any part of the solution

  23. Situation:
    When I hit ARROW DOWN, the dropdown should show. This was done as follows (‘recipients’ is my dropdown component):

    
public function init():void{
  recipients.addEventListener(KeyboardEvent.KEY_UP, onArrowKeyDown);
}

private function onArrowKeyDown(event:KeyboardEvent):void {
    if (event.keyCode == Keyboard.DOWN && !recipients.isDropDownVisible()) {
        recipients.showDropDown();
    }
}

    But then I was facing the following problem:

    I enter ‘Peter’ and choose ‘Peter Smith’ from the list. When I delete ‘Peter Smith’ and hit ARROW DOWN the list is still filtered with the query ‘Peter’.

    Hillel pointed out that I had to add the following line:

    recipients.search();

    This causes the component to update the dropdown based on the current searchText (which is empty at this point).

    Now the handler looks like this and it is working well!

    private function onArrowKeyDown(event:KeyboardEvent):void {
    if (event.keyCode == Keyboard.DOWN && !recipients.isDropDownVisible()) {
        recipients.search();
        recipients.showDropDown();
    }
}
    Reply

    1. Besi,

      Thanks very much for posting this comment. It provides a clear explanation of the problem/solution and I’m sure will be helpful to other people.

      Best,
      Hillel

      Reply

  25. Hi Hillel,

    I am new to AutoComplete, can you please tell me what significance does it add to the Flex applications?

    Please provided me with some reading material so that I can refer that for better understanding of this component.

    Thanks,
    Sumeet

    Reply

  26. Awesome component! My thoughts so far…

    In the AutoComplete component, the handleFocusOut function I added the following snippet

    if(searchText.length >0 && !_allowNewValues)
    {
    searchText=null;
    }

    This removes any left over search text so only real/selected data is rendered. It seems cleaner to remove the search text which doesn’t represent an actual value from the dataprovider.

    I’ve also been going through the demo and src code and encountered a problem. If you compile the project using Flex SDK 3.4 the ListBuilder will generate an error, its easy to reproduce. Use the ‘browse’ button to open the ListBuilder and then multiSelect x number of items using shift, not ctrl. Then drag to the selected list or use the > button, it doesn’t matter. Flex will throw an unhappy RTE. I spent some time debugging it and by commenting out the _dataProvider.refresh() the error won’t occur. Commenting this out also doesn’t impact the functionality of the component.

    private function handleSelectedItemsChange( event:Event ):void
    {
    //_dataProvider.refresh();
    ..other code
    }

    Strange though, that in previous SDK’s (I tried 3.0 & 3.3), this error never occurs :S

    If you’re using the CloseableTitleWindow, it should include the following removeEventListeners for GC.

    private function handleClose( event:CloseEvent ):void
    {
    removeEventListener(KeyboardEvent.KEY_DOWN,handleKeyDown);
    removeEventListener(CloseEvent.CLOSE, handleClose);
    PopUpManager.removePopUp( this );
    }

    Thanks again for making this component available!

    Reply

    1. Paul,

      Thanks for the great feedback, I’ll definitely include these changes in the next version.

      If you find anything else please keep sending it along…

      Best,
      Hillel

      Reply

  27. on line 141 of AdvacendAutoComplete:
    // I haven’t been able to figure out why this is needed super.commitProperties();

    If its commented out, then the advancedAutoComplete wont render/show the actionsMenu even if the actionsMenuDataProvider is specified. It is interesting that super.commitProperties() is called twice

    Reply

    1. Bruno,

      There’s an example at the end of the documentation which discusses exactly that.

      Let me know if you have any trouble getting it working.

      Best,
      Hillel

      Reply

  30. Hi. I treasured to drop you a quick note to impart my thanks. I’ve been following your blog for a month or so and have plucked up a heap of effective information as well as relished the way you’ve structured your site. I am attempting to run my own blog however I think its too general and I would like to focus more on smaller topics.

    Reply

  31. Thanks Hillel for the component. I am finding it very useful for my project. There seems to be a minor bug in
    the DataGrid demo example. I have made the DataGrid autocomplete having allowNewValues as true. When I type in a new value which is not present in DataProvider then
    on tab out the new value disappears. The new value comes back when I press tab out from some other row.

    Reply

  32. First, thanks for this.

    Next, I found a minor bug. I’m in the habit of saving everything, so I hit ctrl+s in the Autocomplete box, and it rendered this character: (shoot–this text box doesn’t support the character).

    Try it–it’s a weird one (for a newb).

    

    Reply

  33. Hi Hillel,

    Presently I am stuck in a small issue. It would be great if you can help on this.

    Presently I am trying to remove an item from the browser option. To do this I have written the
    code like below way :

    //Function for remove the item from the selected list.
    private function handleRemoveClick():void
    {
    for each (var item:Object in _list.selectedItems) {
    var indx:int=this.selectedItems.indexOf(item,0);
    this.selectedItems.splice(indx,1);
    }
    _list.selectedItems=this.selectedItems;
    var changeEvent:Event = new Event( Event.CHANGE);
    dispatchEvent( changeEvent );
    }

    In the older of autocomplete version I have written this code like below way & it works:

    //Function for remove the item from the selected list.
    private function handleRemoveClick():void
    {
    if (_list.selectedIndices.length == 0) {
    return;
    }

    for each (var item:Object in _list.selectedItems)
    {
    var indx:int=originalSelectedItems.getItemIndex( item );
    originalSelectedItems.removeItemAt(indx);
    }
    _list.selectedItems=originalSelectedItems.toArray();

    dispatchEvent( new Event( Event.CHANGE ) );
    }

    Actully the above function works because as soon as I originalSelectedItems.removeItemAt(indx);
    function excute it calls the handleSelectedItemsChange( event:CollectionEvent ) function.

    But as we are using this.selectedItems.splice(indx,1) to remove an item so it did n’t calls
    the handleSelectedItemsChange( event:CollectionEvent ) & it did n’t works.
    Could you please help us to resove this issue.

    Regards,
    Sourav

    Reply

    1. Sourav,

      I’m sorry, could you explain why you’re no longer using the removeItemAt method. You’re right that by calling it the handleSelectedItemsChange function will be called.

      Reply

  34. Hey–love the component, figured out a lot of stuff along the way, but ran into a minor issue:

    no tabindex!

    I have 6 things on a canvas and index is important…will look into using a form control (maybe that has implicit indexing for non-indexable controls?)

    Reply

  35. Hi Hillel,
    Thanks for your reply.
    As per the new modification of AutoComplete version the originalSelectedItems has been defined as Array not the array collection. Thats why I am not able to call the function
    originalSelectedItems.removeItemAt method.

    In the browser class originalSelectedItems defined as

    public function set originalSelectedItems( value:Array ):void
    {
    // do nothing (here to just remove binding warning)

    }
    [Bindable]
    public function get originalSelectedItems():Array
    {
    return _originalSelectedItems;
    }

    And the value of _originalSelectedItems set as bellow way

    public function set selectedItems( value:Array ):void
    {
    _originalSelectedItems = value;
    }

    Could you please tell me how could I resolve the above issue.Should I defined _originalSelectedItems as ArrayCollection. Please help me.

    Regards,
    Sourav

    Reply

    1. Sourav,

      Hmm… I see your issue. I’m assuming you’ve created a custom BrowserClass in order to add the remove button. One approach could be to dispatch a change event from the Browser (this will call handleBrowserChange in the AdvancedAutoComplete class). The catch is in order for remove to work you’d need to make sure you create a ListBuilderClass.

      Let me know if you need more help getting this working,
      Hillel

      Reply

  36. I am using the autocmplete component, which works very well by the way, but when I pull the feilds text property, myAutoComplete.text, it was cutting off the last character of the last word. I looked in the get text function, and it had this line
    str = str.substring( 0, str.length – 2);

    I changed it to
    str = str.substring( 0, str.length – 1);

    but I was wondering if there was a reason it was str.length – 2?

    I haven’t tested it much since making the change, but it did stop cutting off the last character.

    thanks again for a great component.

    Reply

    1. Russ,

      When there are multiple items selected each item is separated by “, “. The substring command is used to remove the last “, “. I’m not sure why it’d be stripping off the last character.

      Hope this helps,
      Hillel

      Reply

  37. Hi, i’m trying to use a dynamic autocomplete, and the drop-down suggestions are not getting refreshed,
    Here is an example, I create an arrayCollection and set it to both the listbox and the autocomplete component, as you can see, sometimes the autocomplete component doesn’t show the values?
    ex:
    http://98.207.236.254/swf/autocomplete.swf
    slowly type in ‘Britn’ the values in the list box should show up in the dropdown list, but sometimes doesn’t.
    thanks,
    Steve,
    I can send u the code if you want, …

    Reply

    1. Steve,

      When working with dynamic data the best practice is to reuse the same dataProvider (ie, add the new items to the existing one). There’s an example called DynamicData.mxml in the examples folder. If you’d like to keep it the way it is adding the following (at the end of your onJSONLoad function) will show the menu.

      if (!artist.isDropDownVisible())
      {
      artist.showDropDown();
      }

      To change the border thickness your going to need to set it on the flowBox component inside the AutoComplete.

      Hope this helps,
      Hillel

      Reply

      1. For dynamic data, the dropdownRowcount needs to be refreshed, it uses the length value for the previous dataprovider. I added this code to AutoComplete.mxml:(should it be added to showDropDown() instead?)
        public function dataProviderUpdated():void {
        if (isDropDownVisible())
        {
        callLater( highlightFirstItem );
        _dropDown.rowCount = (_dataProvider.length < _dropDownRowCount ? _dataProvider.length : _dropDownRowCount);
        }
        }

        call this after you've updated the dataprovider to refresh the dropdownlenght.

        to see the problem, goto:
        http://98.207.236.254/swf/autocomplete.swf
        and enter 'bruce s' there are only 2 items in the list, then enter another letter 'bruce sp' and the dropdownlength is only 2, should be more.

  38. fyi,
    If you include a borderThickness=”6″ to the autocomplete component, the focus border is inside the textarea by that amount.

    Reply

  39. Hello,

    Is there a simple way to prepoulate the selectedItems and not allow duplicates to be added (the allowDuplicates property didn’t resolve this)? My first stab at using thecomponent required setting the selectedItems to an ArrayCollection loaded up from a previously edited value object, but since the items that were prepopulated do not have the same memory location as the items in the AutoSuggest.dataProvider, the component allows the user to add already selected items once again.

    Thanks in advance.

    Reply

    1. SJ,

      I’m sorry, there’s no automatic way. You’re going to need to filter out the dupes first before setting them in the selectedItems property. The classic solution is to create a hashmap (ie map[key] = object) then take the values from the map.

      Reply

  40. How to detect a change?

    What’s an easy way to detect when the user starts to type in the component? I want something similar to the change event in a textinput,
    ‘Change’ is available, but it only detects when the user selects an item.
    thanks,
    steve

    Reply

    1. Steve,

      Thanks for the fix, I’ll add it to the next version.

      To detect a change when the user types in the autocomplete add a listener for the searchChange event.

      Best,
      Hillel

      Reply

  41. Hi, how do I listen for deleting of items in autocomplete, searchChange doesn’t pick up anything.
    I’m using option backspaceAction=”remove” and using the backspace key to delete items already entered.

    Reply

    1. Steve,

      When the selection is changed (ie, user clicks the backspace key) the component should dispatch a change event, when the search text is changed (ie, user types in text) it should dispatch a searchChange event.

      Is it not working this way for you?

      Reply

  42. This component is awesome. Just dropped it into my Flex project and it worked perfectly – no setup fuss, no nothing – just working how I wanted!

    Reply
  43. Pingback: Link: Flex AutoComplete component | Psyked

  44. Hi,
    How can I programmatically add an entry to the autocomplete component?

    something like ? :
    autocomplete.flowbox.selectedItems.addItem(‘new entry’);
    or
    autocomplete.selectedItems.addItem(‘new entry’);

    ??
    thanks,

    Reply

  45. Hi,

    Is there anyway the user can hit a special key and the full list of elements will be shown? Right now, the user has to input something to see partial list based on the input.

    Thanks,
    -Bo

    Reply

    1. Bo,

      You could add a button to show the list of values. There’s an example of how to do this using the InlineButton feature at the end of the documentation.

      Reply

  46. Sorry, I’m beginner on AS3 but I need addd a auocomplete texfield on a flash CS4 form (I mean, no Flex), can you help me?
    thnaks in advance!

    Reply

      1. Thanks, Hillel, yes, the problem with AStra is that I need read from a xml and it dont work, and really, I dont know what to do. Do you know some other solution?
        thanks

  47. Hillel–I didn’t check for answers to this, but when I initially implemented the component, I grabbed values from the SearchText property, passed into a function, assigned to an array, and everything was great.

    And then tonight, for some weird reason, SearchText wasn’t holding the entered values anymore. So I switched it to the Text property, and things work fine now.

    Perhaps I don’t understand the behavior, but maybe there’s an issue. It’s likely me, of course 🙂

    Reply

  48. This is a most excellent and prodigious control!
    Thanks very much for this awesome contribution!
    It helped me GREATLY!!!
    JR

    Reply

  49. Hi Hillel,
    I’m back to the pre-selection issue. Is there a better way to do this, given that my data is an ArrayCollection of objects, and I am setting both teh labelField and the keyField? Everything works fine the first time, with my patch, from before (above) using the IView. Problem is that if I key in a searchText, then somehow the ArrayCollection is in a filtered state and the length is 1, the last item selected. This breaks the “setOne” button, restating the dataProvider length is 1, even though the source for the ArrayCollection is left entact.

    From above, my patch

    var cursor:IViewCursor = _dataProvider.createCursor(); while(!cursor.afterLast) { var obj:Object = cursor.current; if(obj != null && obj.hasOwnProperty(_keyField) && obj[_keyField] == _selectedItemId) { _selectedItems.addItem(obj); _selectedItemId = 0; break; cursor.moveNext();
    }

    Reply

  50. yet another hack:
    public function refreshFilter():void { _dataProvider.filterFunction = null; _dataProvider.refresh(); _dataProvider.filterFunction = filterFunctionWrapper;
    }

    Hillel,
    I keep forgetting to thank you profusely for publishing a fine component and responding 220+ times.

    Reply

Leave a reply to Hillel Cancel reply