Flex AutoComplete: Version 1.0

It’s been about a year since first creating the component. I’ve been using it extensively in the applications I work on and it’s been downloaded thousands of times. At this point I’m pretty confident in saying that it works reliably.

Latest version

If you’re already using the component you probably noticed that there’s now a “Latest version” link (rather than the old Demo and Download links). I’ve decided to set up a permanent page on my blog for the component. The important info (ie, the component’s license) is currently scattered amongst the past posts, this way I can keep everything together in one place.

Here’s what’s changed in this release

  • Added support for XMLListCollections: You can now use either an ArrayCollection or an XMLListCollection as the dataProvider.
  • ListBuilder is now a first class component: I’ve refactored the code to support using the ListBuilder on it’s own.
  • Added browserFilterFunction: I’ve added a browserFilterFunction which enables applying a separate filter which is applied to the results shown in the browser. I sometimes show a mix of items in the component. I use this to offer multiple browse options in the actionMenu in the AdvancedAutoComplete.
  • Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any issues people have found.

Thanks to e/o who’s spotted bugs, suggested improvements and just been supportive in getting the component to this state. There’s no doubt in my mind that sharing the component with the Flex community has made it far better than it otherwise would have been.

Best,
Hillel

109 thoughts on “Flex AutoComplete: Version 1.0”

  1. Hi!

    Your AutoComplete component is great, but i discovered some issue. When i set in Project properties “Required flash version” to 10+ (10.0.0 or 10.0.22), submit of found autocomplete-item by ENTER doesn’t work (in property “selectedItem” is object of selected item, but text-input view is empty). When i set required flash version to 9.0.124, all works fine.

    Thank you for your response and good luck! 🙂

    My source code:

    Reply

    1. Ján,

      Thanks very much for pointing this out. I’ve been able to track this down to the change handler for the TextInput. It looks like if you click enter in 9.0.124 it doesn’t dispatch a change event while in 10.0.0 it does. I’ve created a post on the Adobe forum to see if anyone is aware of this being a bug.

      For now, I’ve implemented a workaround in the code. I’ve checked a new SWC into the google code site, please give it a try and let me know if it resolves your issue.

      Thanks,
      Hillel

      Reply

      1. Hillel, thank you for your flash-fast response!

        Your workaround is working perfectly, good job!

        Btw, i have one idea/feature request 🙂

        We use your AutoComplete component for thousands of items, but also for 20 items. It would be usefull, if we could set a flag, for example “comboBoxMode = true”. This feature will show down-arrow on right side and when you click on arrow, it display the entire menu.

        What do you think about it? This feature is beyond the basic AutoComplete functionality, but it would be usefull.

        Thank you!

      2. Hi Hillel!

        I have just tried your component today. I’ve checked at least 5 autocomplete combobox, and spent 20 hours with bug-fixing, without success.
        So, I downloaded your code, and found the issue, mentioned before. Thanks for the fast fix, it works for me too, and helped me a lot!

  2. Hi Hillel, again me 🙂

    When i use “prompt” property and prompt is displayed, user must click into textinput two-times for focus it.
    This is user-unfriendly and inconsistent with functionality without the use of prompt feature.

    Thank you!

    Reply

    1. Ján,

      I agree, having to click twice to focus is unacceptable. The challenge is I’m unable to replicate the issue. Does it work correctly for you when you try it in the demo?

      I’m planning on adding a comboBox button in the future, but for now you could do something like this (note, there was a slight issue with the dropDown when using this approach so I checked in a new SWC to resolve it).

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="com.hillelcoren.components.*">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.collections.ArrayCollection;
			
			&#91;Bindable&#93;
			private var _data:ArrayCollection = new ArrayCollection( &#91;"one","two","three"&#93; );
			
			private function handleButtonClick():void
			{
				if (autoComplete.isDropDownVisible())
				{
					autoComplete.hideDropDown();
				}
				else
				{
					autoComplete.search();
					autoComplete.showDropDown();
				}				
			}
			
		&#93;&#93;>
	</mx:Script>
	
	<components:AdvancedAutoComplete id="autoComplete" dataProvider="{ _data }">
		<components:inlineButton>
			<mx:Button icon="@Embed(source='/com/hillelcoren/assets/icons/down.png')" click="handleButtonClick()"/>
		</components:inlineButton>
	</components:AdvancedAutoComplete>
	
</mx:Application>
      Reply

      1. This is fully sufficient!

        Btw, problem with focusing is only in one specific form in our large application.
        For imagine:

        ShellApplication / Module / FormWindow (popup) / Box / TabNavigator / Form / FormItem / HBox / AutoComplete / mainGridRow / mainGridItem / flowBox.textInput

        Unfortunately, it is not easy to replicate this issue in the sample application 😦

        FYI, when i added calling “callLater(setFocus);” to end of method-body hidePrompt() in PromptTextInput, it fixed this issue. It’s stupid solution, but works and unfortunately, i don’t have a time for analyzing the cause of this problem 😦

  3. Hi Hillel,

    Is it possible to quick edit the selected item?For example my data provider contain three record like “value1″,”value2″,”value3”.Now by mistake you select “value2” instead of “value1”.
    Now I want to edit the “value2” in selected item means
    I want to select “value1” by replacing “2” with “1” from “value2” and validate it.
    In the current scenario is it possible to accomplish this task.
    Please help.If you are not able to understand my question please let me know.

    Regards,
    Manna

    Reply

    1. Manna,

      It’s a bit of a hack but give this a try and let me know what you think….

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:components="com.hillelcoren.components.*"
	initialize="init()">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.events.CollectionEventKind;
			import mx.events.CollectionEvent;
			import mx.collections.ArrayCollection;
			
			&#91;Bindable&#93;
			private var _data:ArrayCollection = new ArrayCollection( &#91;"one","two","three"&#93; );
			
			private function init():void
			{
				autoComplete.selectedItems.addEventListener( CollectionEvent.COLLECTION_CHANGE, handleSelectedItemsChange );
			}
			
			private function handleSelectedItemsChange( event:CollectionEvent ):void
			{
				if (event.kind == CollectionEventKind.REMOVE)
				{
					var item:Object = event.items&#91;0&#93;;
					var str:String = autoComplete.labelFunction( item );
					str = str.substring( 0, str.length - 1 );
					
					// need to let the component clean out the old value
					callLater( resetValue, &#91;str&#93; );
				}
			}
			
			private function resetValue( str:String ):void
			{
				autoComplete.searchText = str;
				autoComplete.textInput.textInput.setSelection( str.length, str.length );
				autoComplete.textInput.setFocus();
				autoComplete.search();
			}
									
		&#93;&#93;>
	</mx:Script>
	
	<components:AutoComplete id="autoComplete" dataProvider="{ _data }"/>
	
</mx:Application>
      Reply

    2. Manna,

      One other quick point: you’re may want to set backspaceAction=”remove” in the AutoComplete component. This way you’ll go right into edit mode when clicking the backspace.

      Reply

  4. Hi Hillel,

    Thanks a lot & thanks for your awesome reply.I am going to implement your logic.

    Regards,
    Manna

    Reply

  5. Hi Hillel,

    Thanks hillel.Everything is working fine except one small issue.After clicking on remove icon
    then selected item comes in edit mode.
    Because if we click the remove icon then also handleSelectedItemsChange fuction is getting called.

    Could you please tell us how can I stop to call
    handleSelectedItemsChange function when you click in remove icon.

    Regards,
    Manna

    Reply

    1. Manna,

      This is why hacks suck: they never work quite right and the little issues the pop up just require mode bad code to fix. That being said, here’s a possible workaround…

      			private var _lastKeyPressed:uint;
			
			private function init():void
			{
				autoComplete.addEventListener( KeyboardEvent.KEY_DOWN, handleKeyDown, false, 100 );
				autoComplete.selectedItems.addEventListener( CollectionEvent.COLLECTION_CHANGE, handleSelectedItemsChange );
			}
			
			private function handleKeyDown( event:KeyboardEvent ):void
			{
				_lastKeyPressed = event.keyCode;
			}
			
			private function handleSelectedItemsChange( event:CollectionEvent ):void
			{
				if (event.kind == CollectionEventKind.REMOVE && _lastKeyPressed == Keyboard.BACKSPACE)
				{
					var item:Object = event.items[0];
					var str:String = autoComplete.labelFunction( item );
					str = str.substring( 0, str.length - 1 );
					
					// need to let the component clean out the old value
					callLater( resetValue, [str] );
				}
			}

      Add a private variable called _lastKeyPressed and store it when the user presses a key. Note, the priority is set higher b/c we need to catch it before the AutoComplete does. Then in the handleSelectedItemsChange add a check that _lastKeyPressed equals Keyboard.BACKSPACE.

      Reply

  6. Hi Hillel,

    Can I use Clipboard to paste the copied string into AutoComplete and then showDropDown()?

    I use the following code:
    var copyStr:String=Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT) as String;
    AC.searchText = copyStr;
    AC.showDropDown();

    However, the dropdown list has no filter by the searchText;

    Thank you for your responding!

    BR,
    KFHwang

    Reply

  7. Hillel, thank you very much!
    It works, but unnecessary to call AC.showDropDown().

    Thanks again!

    BR,
    Kfhwang

    Reply

  8. Hi Hillel,

    got a question concerning the dropdownwidth. I’ve noticed that the drop down list’s width, when not set explicitly, is equal to the input’s width, regardless of the width of the dataprovider’s items’ width. However, specification of the combobox’s property is that it is equal to the max value between 100 and the largest width of the dataprovider’s items.
    did i miss something or is there a bug?

    Reply

    1. Pier,

      I’m sorry, I’m not following. Where did you get the 100 value from?

      Essentially you have two options: by default it’ll just match the input’s width or you can specify a width in which case the dropDown will just match the width (regardless of the width of the items).

      Reply

  9. sorry, the 100 comes from here: http://livedocs.adobe.com/flex/3/langref/mx/controls/ComboBox.html#dropdownWidth

    i understand the two options but what i don’t understand is that, according to Adobe’s documentation, if you don’t specify a width, it should take the width of the longest item. Obviously, that’s not working so i’m thinking about modifying your component to implement that functionnality. i’ve already found a few examples in the flex community of components doing so (eg: http://ifeedme.com/blog/?p=19)

    Reply

    1. Pier,

      I follow you now, the AutoComplete component doesn’t extend from the ComboBox class (so it doesn’t implement this behavior). If you decide to implement this feature let me know if you need any help getting it working.

      Best,
      Hillel

      Reply

      1. My bad! i thought it was an editable Combobox type of thing. Well in that case, i’ll go ahead and make the modifications myself.
        Thanx for the info

  10. In the examples, I see the “facebook style” has small “x’s” to delete items – but I can’t figure out how to get the “facebook style” to have those delete X’s when I’m using it with an AdvancedAutoComplete.

    I’m probably missing something – but is there some property I need to set?

    Reply

  11. Hi Hillel.

    I found a bug in match highlighting. When i wrote “pa”, it highlight also “bo”, “br”, etc..

    Wrong and correct example with my fix is here:

    I modified your StringUtil.as, method highlightMatch:

    // solution by Jan Reges, 2009-07-17
    var searchStrPattern:String = (“(“+searchStr+”)”);
    var returnStr:String = string.replace( new RegExp(searchStrPattern, ‘igm’), “$1” );

    /*
    var returnStr:String = string.substring( 0, matchPos );
    returnStr += “” + string.substr( matchPos, searchStr.length) + ““;
    returnStr += string.substr( matchPos + searchStr.length, string.length ) + ” “;
    */

    return returnStr;

    Reply

    1. Ján

      Very nice!! I actually wanted to code it this way initially but had trouble getting it working.

      Thanks very much, I’ll include your change in the next release.

      Best,
      Hillel

      Reply
  12. Pingback: AutoComplete « Mjcprasad’s Blog

  13. Great component, Hillel. In the case where the item’s labelField value is null, it will throw a RTE. One way is to fix is to always have a custom labelFunction to account for it. Or, in AutoComplete.mxml add this to the function “defaultDropDownLabelFunction”

    if (string == null)
    return “”;

    Cheers.
    Mike

    Reply

  14. Hi Hillel,

    Thanks and great job on creating such an excellent component. I am working on an application that uses the AutoComplete and I am adding the ability to display the full dataProvider on FlowBox focus. When I have a working version, would you like me to post it up here for your approval?

    Ideally I would like to view the latest version of the source, but the google code site is currently displaying a “Forbidden” message when I access it. Do I require an account to use it?

    Many thanks,

    Matt

    Reply

    1. Matt,

      Thanks, happy you like it 😀

      Yeah, I’d love to see what you’re working. Maybe you could post a link to an example.

      I’ve just fixed the issue with the google code site, you should now be able to access it.

      Best,
      Hillel

      Reply

  15. Hi its is very nice components
    but i having a problem how can i set the global xy to local xy when i am creating its default starting from x=0, y=0, when you put any text also there is another problem seleted item appears with a button how can i disable that anyway , i am using Flex 4 , everything is fine except above those lines..

    thanks

    Reply

    1. Demo,

      I’m sorry, I’m not sure I understand your global/local issue. You should be able to control how it looks by setting the selectedItemStyleName property.

      Reply

  16. Hi Hillel,
    Is it possible to select multiple record with ctrl or shift key.As I know my autocomplete component availble for multiple selection. So is it possible to select mutiple records using only mouse click & after selecting all records user click the select option to dispatch the selected records.
    Please give some idea whether is it possible or not.
    Anticipating to get ur feedback soon.
    Regards,
    Manna

    Reply

  17. Hi Hillel,
    Sorry I have made one mistake in my previous mail.Is it possible to select multiple record with out ctrl or shift key in datagrid.As I know my autocomplete component availble for multiple selection. So is it possible to select mutiple records using only mouse click & after selecting all records user click the select option to dispatch the selected records.
    Please give some idea whether is it possible or not.
    Anticipating to get ur feedback soon.
    Regards,
    Manna

    Reply

    1. Manna,

      I’m sorry, the component doesn’t currently support that feature. If you’d like to implement it I’d be happy to help.

      Reply

  18. Hi Hillel,

    Thanks for your reply.Yes I want to implement this feature in this component.Could you please guide me with some link or some hints.

    Regards,
    Manna

    Reply

    1. Manna,

      Currently the buttons have the toggle property set to true. You’ll need to set this to false and then manually track which buttons are selected.

      Reply

  19. Hello hillel,

    For the case of multiple selection,can we increase the height of flowbox(textinput) dynamically upto certain length.

    Any help will be appriciated.

    Regards,
    Toton

    Reply

  20. Hi–Your AdvancedAutoComplete component seems like just the solution we need compared to the buggy & not quite supported Adobe version.

    However, it seems to be quit a bit bigger and more importantly when we build a Flex application with it the result is very large. Are we missing something (we’re experienced programmers, but very new to Flex & Flash) about how to correctly use the SWC or build the SWF? We’re seeing sizes close to 1MB even for fairly small applications.

    Thanks!–David Cardinal

    Reply

  21. Hi,
    Great component thanks.
    I’m pre loading some data in a component using the addItem function.

    then, when the user tries to add some new records within the component (multiple selection) it doesn’t grey out (lock) the already pre loaded records.
    any ideas how I can lock the pre loaded records so the user can’t select them again and we won’t have duplicates.

    Thanks.
    Fayad

    Reply

  22. Hi Hillel,
    I want to display the dropdownitem renderer as treeview mode.

    For examle my dataprovider contain like below format

    Animal
    Mammal
    cat
    dog
    Insect
    Ant

    Now user type “cat” in textinput.It will display like below

    Animal
    Mammal
    cat(Highlighted)
    dog
    Insect(Collapse mode)

    Now if user select Show all. It will display whole structure.

    Animal
    Mammal(Collapse mode)
    Insect(Collapse mode)

    If any thing is selected then that will be diplayed in greayed color
    (ex: cat & ant selected by the user)

    Animal
    Mammal
    cat(greayed color)
    dog
    Insect
    Ant(greayed color)

    [Note :There will be only one root parent for all child.(Ex:-Animal here)]

    Actually already I spend a lot of time but not find any good solution . Could you please help me with some hints. How can I modify your component to achieve the above requirement.

    Anticipating to get your feedback soon.

    Thank you for your kind assistance.

    Please help.

    Regards,
    Toton

    Reply

    1. Toton,

      I’m sorry, I don’t believe this will be easy to accomplish. The item renderer is used to display a single item but in your case you need a single renderer (the tree) to display all of the items.

      Reply

  23. Hi Hillel/All,

    Thanks for your reply. Can any of you come out with
    some idea, how can I accomplish the above functionality. It would be great if any of u can provide some guideline/link etc..

    If any of u think it is not possible to accomplish this please tell me the reason so that I can tell to my boss.

    If is there any other possible solution to achieve the simlar kind of functionality then I can design my own component but before to do that I want all of your suggestion how can I design this component.

    If you want to give me the suggestion u can mail me home4toto@gmail.com.

    Thank you for your kind assistance.

    Regards,
    Toton

    Reply

  24. Hi Hillel,

    No wonder people are showering praises on you. This is one of the most comprehensive user extensions I have ever seen and I am not talking just about flex!

    I had some 3 or 4 small issues that your extension was not providing. But most of them were already encountered by other users and was explained in detail in the comments section. Thanks again!

    Reply

    1. Murali,

      Thanks so much, that’s really nice of you to say 🙂

      Let me know if you run into any other issues.

      Best,
      Hillel

      Reply

  25. Fixed the problem. Issue was I’m using ‘import artwork’ to skin my app. When you import artwork, it also generates a css file too. Just deleting the entry in that for ‘textInput’ fixes the problem.

    Cheers,

    Jamie.

    Reply

  26. Dear Hillel,

    I reply here bcos of your kind pointing me a hint and I already successfully solve the problem. I’d like to thankyou for your time replied. I’m so much appreciated. I’d like to put the code here to whoever got the same issue I faced before,just in case you found it useful 🙂

    Here’s a complete “some way” for creating an autocomplete without button style within the search textinput(just the same as yahoo, google autocomplete)

    Thanks a ton again!! : )

    Reply

    1. Vee,

      I’m curious to see how you implemented it (I get that request a lot). If you could email me the changes that’d be great.

      Thanks,
      Hillel

      Reply

      1. Hi Hillel,
        I need source code for autocomplete component without button style as Vee said. I try to set selectedItemStyleName to none but still got button style.
        Thx!

  28. Hi Hillel,

    Presently I am facing a big problem & it would be great if you provide some help on this.

    Problems like below:

    Presently my dataprovider can contain >100K records.

    So actually what I want, to use two seperate data provider one for dropdownItemRender (Which contain only few important data) means every time when you use Autocomplete.textinput option it will use this dataprovider.
    Another dataprovider for browser option which can contain all data.(Means here you can search all your data among 100k records & select that records).

    To solve this issue intially I thought :
    1)Assign the dataprovider for dropdownItemrender in
    handleKeyDown event
    2)Again reassign the dataprovider for browser option on handleItemClick function and remove this data from dataprovider when you are closing the browser option.

    But I think there should be a different way to implement this.If is there any different option please suggest me with that.

    Thank you for your kind assistance.

    Regards,
    Manna

    Reply

    1. Angeline,

      There are two components: the AutoComplete and the AdvancedAutoComplete. They are both in the same SWC (and are therefore both in the same download).

      Let me know if this is unclear

      Reply

  30. Hi Hillel,

    I need the ability to decide the disable color for the AutoComplete, my usage also includes disabling just the SelectedItem so even better if I could also specify a color for this too.

    I’m fresh out of ideas how to get this working without modify the code, any recommendations?

    Thanks,
    Guy.

    Reply

    1. Guy,

      The ColorDemo provides a good example of how to do this (the source is in the examples folder). It uses the ColorItemRenderer.mxml file to control the color of the text based on whether or not the item has been selected.

      Let me know if you have any trouble getting this working

      Reply

      1. Hi Hillel,

        I actually meant the colors after the item has been selected and is displayed in the AutoComplete box, when you disable the AutoComplete it switches to a very light shade of gray. I’ve tried experimenting with the CustomSkin example to no avail.

        Guy.

      2. Guy,

        Ahh… gotcha, that’s a bit trickier. The CustomSkin applies the same skin to all of the selected items. You could try looping through the flowBox’s children, these will (except for the last child) be SelectedItems. You could then manually set the styleName property of the button component to a skin.

  31. Почитал, порадовало 🙂 А может и правда всегда думать исключительно о хорошем, а все плохое переворачивать?

    Reply

  32. Hi Hillel,

    I’ve been having some problems with the sizing of PromptTextInput being set to a neglible value if an AutoComplete component is created for a hidden container. The consequence of this is that typed text is then not echoed to the screen.

    A solution that seems to work is to set the percentWidth of the PromptTextInput to 100% during the updateDisplayList() method in the FlowBox, specifically as below:

    if (child is PromptTextInput) {
    if (child.width + sidePadding > width){
    child.width = width – sidePadding;
    }
    // New line below
    child.percentWidth = 100;
    }

    Guy.

    Reply

  33. Hi Hillel,

    I think my previous comment may have been missed but is quite a significant issue for my usage of the tool so worth repeating.

    BTW are you thinking of doing a new release soon to incorporate the various fixes?

    —-

    I’ve been having some problems with the sizing of PromptTextInput being set to a neglible value if an AutoComplete component is created for a hidden container. The consequence of this is that typed text is then not echoed to the screen.

    A solution that seems to work is to set the percentWidth of the PromptTextInput to 100% during the updateDisplayList() method in the FlowBox, specifically as below:

    if (child is PromptTextInput) {
    if (child.width + sidePadding > width){
    child.width = width – sidePadding;
    }
    // New code below
    child.percentWidth = 100;
    }

    Guy

    Reply

  35. Great component – thank you!

    If i’m not using multiple item entry, I would like to be able to hit the ENTER key to do something (like submit a form). How would I do this with your component?

    Reply

    1. Devin,

      You should just need to set the defaultButton property of the form to your submit button.

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

      Reply

  36. Hi,

    I tried the STYLE_FACEBOOK and selectionLayout=”vertical” together but didn’t work as expected. I don’t want to display multiple selected FACEBOOK styled items on one line. Is there another way to do this with the FACEBOOK style?

    BTW, thank you for a great component!

    Reply

    1. Tmv,

      I’m sorry, the styles are only applied when using the horizontal layout. You’ll need to create a custom itemRenderer for the list component for it to work in the vertical layout.

      Reply

  37. Hi Hillel,
    I want to add some icon on action menu item. I tried to modify the ActionMenu class with following code
    _menu.iconField=”@icon”;
    Before this I also modified the menuData like below:
    <mx:XML format=”e4x” id=”menuData”>
    <root>
    <menuitem data=”browse” label=”Browse…” />
    <menuitem data=”remove”icon=”@Embed(source=’imagepath’)”
    label=”Remove All” />
    </root>
    </mx:XML>

    but some reason it does not work. Could you please help me on this topic.
    Thanks in advance.
    Regards,
    Sourav

    Reply

  38. Great component! Im using this in a DataGrid + AdvancedAutoComplete and it works great with two questions:

    1) Sometimes when I’m editing a column I get a null reference error on line 57 of FlowBox.mxml, which traces back to this line

    var focusOwner:DisplayObjectContainer = focusPane.parent;

    in UIComponent.as

    It seems to happen when clicking and dragging the mouse over a previously edited field. I can give any more details if needed

    2) Question: Normally, if I have allowMultipleSelection=”true”, an item is grayed out if I try to select it twice. But… If i prefill the autocomplete with values coming from the datagrid’s dataProvider (Tom, Jim), then populate the AdvancedAutoComplete’s dataprovider with a much larger list that also includes Tom and Jim, I can select Tom or Jim multiple times. This behavior makes sense because Tom and Jim are unique at that point – my question is: is there a better way?

    Thanks again!
    Ben

    Reply

    1. Ben,

      1. I’ve made some changes which *may* help with this. Can you please try using the latest code from the google code site. Note: you need to do a SVN checkout to get the latest code.

      2. I’m sorry, I’m not sure I’m following what you question is. Could you please try putting it another way.

      Thanks

      Reply

      1. Thanks for the reply. Unfortunately the latest code from google code SVN doesn’t have any effect on the FlowBox.mxml:57 error.

        at com.hillelcoren.components.autoComplete.classes::FlowBox/handleFocusIn()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/autoComplete/classes/FlowBox.mxml:57]
        at flash.display::Stage/set focus()

        I’ve tried Flex SDK 3.2 and 3.4. I have allowMultipleSelection = true on the dataGrid, if that matters.

        Aside from my one small problem – this is an outstanding component, and thank you very much for sharing it

  39. Hi Hillel,
    I am using AutoComplete ComboBox,right now it displays the matching options based on the typed input value. is it possible to display the entire list and highlight the matching option based on the user text???

    Regards,
    Sundar

    Reply

    1. Sundar,

      Try using the following function as the filterFunction

      private function filterFunction( item:String, searchText:String ):Boolean
      {
      return true;
      }

      Reply

  40. Hi Hillel,

    Currently I am struggling with a big issue,it would be great if you can help me out from the situation.The problem likes below:

    Currently I am loading the data dynamically from the server based on the search text. For ex,if user type “a” we load the data which contain the search text “a”. When data is loading from the server we did not allow user to give one more input.After loaded , user can type once again like(“ab.. ” etc..and so on.)

    The problem is , however the user know his input(or he may know partial input like 3-4 char of search text), for every input he has to wait for server response which is not right i.e user can not type very fast ,

    The probable solution I think we have to use some timer concept (i.e. we must use delay concept,if the delay time occurs then only we processed the input.)

    But I did not understand how can we apply the timer concept in the autocomplete component. Could you please help us with some code snippet.

    Thanks in advance.

    Regards,
    Sourav

    Reply

    1. Sourav,

      A simpler solution may be to simply wait for the user to type 3 characters (that should limit the data set enough so you only need to make one request from the server).

      Check out DynamicData.mxml (in the examples folder in the zip). It demonstrates using a timer to simulate a server populated AutoComplete.

      Reply

  41. Hillel,
    There are two methods available for filterFunction,which one should be modified,i am stuck,can u help me out in fixing this???

    public function get filterFunction():Function
    {
    return _filterFunction;
    }

    public function set filterFunction(value:Function):void
    {
    //An empty filterFunction is allowed but not a null filterFunction
    if(value!=null)
    {
    _filterFunction = value;
    filterFunctionChanged = true;

    invalidateProperties();
    invalidateDisplayList();

    dispatchEvent(new Event(“filterFunctionChange”));
    }
    else
    _filterFunction = defaultFilterFunction;
    }

    Thanks,
    Sundar

    Reply

  42. Hi Hillel,
    I have a query regarding the behavior of the PromptTextInput box component that you’ve created.
    And here’s what I’m struggling with.

    By default, setting the prompt property displays the prompt string in greyed italics.
    However, if we were to type in something into the PromptInputText box…and then set the prompt property back again to the original prompt string, I’m seeing that the greyed italicized style goes away…and I see the prompt string displayed using the default style (black, un-italicized).
    Is this an expected behavior? And if so, how can I get the greyed italicized style back again?

    Thanks
    Gaurav

    Reply

    1. Gaurav,

      This is a bug which I plan to have fixed in the next version. You should be able to clear the text (and reset the prompt) by setting the text value to null. This doesn’t work though… here’s a rather ugly workaround.

      promptTextInput.text = null;
      promptTextInput.validateNow();
      promptTextInput.text = null;

      Reply

  43. Hi Hillel,

    I have same problem of tab navigation as other friends having. I have tried the solution they had suggested and i have also tried to figure out the problem. This problem may be because of outer Grid Row which does not get the focus while tab navigation or in focus manager does have show this component in its focus component array. I have also tried by overriding tabIndex method but did not succeed. Is there other way to get the success.

    Thanks

    Reply

    1. krunal,

      I’m not seeing this issue myself, if you could put together a sample application which demonstrates the issue I’d be happy to take a look at it.

      Reply

  44. Thanks for your reply Hillel,

    Actually what i am doing is that i am opening the mxml which have AutoComplete component in popup manager. When the popup open and i click on Tab key my focus does not set to component but it is working with other component.

    Following is my sample code :

    Thanks

    Reply

      1. Hi Hillel,

        I have dropped email to you for the same.

        Regards,
        Krunal

  45. Hi Hillel,i’m leon.
    thanks again for your great component.
    now i have a problem:if my dataprovider is {“a”,”b”,”c”}
    then i key “a” in the textinput,then the “a” is selected but the dropdownitem haven’t show,
    could you help me to show it??? thank you!!!

    best regards!!!

    Reply

  46. Hi Hillel,

    can we able to open list with all value without applying filter?

    means on set focus of type ahead, by default list will populated with all value. and while entering the value it will filter the list and so on.

    Thanks.

    Reply

      1. Hi Hillel,

        Thanks for you update, actually i had tried the same but unfortunately i am not able to open it due to _dropdown.parent is getting null in isDropDownVisible method.

        I have called showDropDown() method in handleFocusIn handler.

        And one more thing o observed is that while executing handleMouseDown handler, it will hide the dropdown.

        Thanks,
        Krunal

  47. Hi Hillel,

    Is it possible to add comma (,) for new values. Whenever I enter (,) the selection is cleared.

    Thanks,
    Shankar.

    Reply

  48. Hi Hillel,

    is it possible to display “nothing found” on the Autocomplete or get a message “nothing found” if there are no matching data?

    Thanks,
    Patrick

    Reply

    1. Patrick,

      One possible way to implement this could be to add a “nothing found” element to your data list. Then set a custom function which always returns false for the item unless it’s the only item left.

      Reply

  49. Hi Hillel,
    I am using autocomplete old version and I want to migrate to newer version (AutoComplete-1.2-Fx3.swc) But it is causing the following errors.

    Could you please help me in this regards,

    Ambiguous reference to handleItemRemove.
    Ambiguous reference to handleItemTextInput.
    Ambiguous reference to handleEditableItemChange.
    Incompatible override.

    1152: A conflict exists with inherited definition com.hillelcoren.components:AutoComplete._allowEditingNewValues in namespace protected. ExtendedAutoComplete.as

    1152: A conflict exists with inherited definition com.hillelcoren.components:AutoComplete._allowNewValues in namespace protected. ExtendedAutoComplete.as

    1152: A conflict exists with inherited definition com.hillelcoren.components:AutoComplete._delimiter in namespace protected. ExtendedAutoComplete.as

    1152: A conflict exists with inherited definition com.hillelcoren.components:AutoComplete._dropDownRowCount in namespace protected. ExtendedAutoComplete.as

    1152: A conflict exists with inherited definition com.hillelcoren.components:AutoComplete._showRemoveIcon in namespace protected. ExtendedAutoComplete.as

    Thank you,
    Bhas.

    Reply

    1. In the latest version of the AutoComplete I’ve changed all private functions to protected (so people can more easily override the behavior). It’s possible that this change has introduced some naming conflicts in your ExtendedAutoComplete class. You should just need to change the names of your functions to resolve the errors.

      Reply

  50. Hi Sir,

    Am new Flex , In Flex mobile Projects (flash builder 4.5 ). Autocompleteis not available could u please give advise for any alternate element to autocomplete of TextInput Control Thanks in Advance.

    Reply

Leave a comment