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”

Ján Regeš says:

July 7, 2009 at 10:56 am

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. Hillel says:
  
  July 7, 2009 at 12:48 pm
  
  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. Ján Regeš says:
    
    July 7, 2009 at 1:32 pm
    
    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. Kamela says:
    
    July 7, 2009 at 7:03 pm
    
    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!
Ján Regeš says:

July 7, 2009 at 2:25 pm

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. Hillel says:
  
  July 7, 2009 at 3:27 pm
  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. Ján Regeš says:
    
    July 8, 2009 at 2:00 pm
    
    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 😦

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

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>

Hillel says:

July 14, 2009 at 8:30 am

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

Manna says:

July 14, 2009 at 9:55 am

Hi Hillel,

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

Regards,
Manna

Reply
Manna says:

July 14, 2009 at 11:49 am

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. Hillel says:
  
  July 14, 2009 at 12:37 pm
  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
kfhwang says:

July 15, 2009 at 6:12 am

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
1. Hillel says:
  
  July 15, 2009 at 7:47 am
  
  Kfhwang,
  
  Try the following…
  
  AC.searchText = copyStr;
  AC.search();
  AC.showDropDown();
  
  Reply
kfhwang says:

July 15, 2009 at 9:30 am

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

Thanks again!

BR,
Kfhwang

Reply
Pier says:

July 15, 2009 at 12:52 pm

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. Hillel says:
  
  July 15, 2009 at 1:14 pm
  
  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
Pier says:

July 15, 2009 at 2:27 pm

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. Hillel says:
  
  July 15, 2009 at 8:22 pm
  
  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. Pier says:
    
    July 16, 2009 at 10:39 am
    
    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
Ryan says:

July 16, 2009 at 2:10 am

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
1. Ryan says:
  
  July 16, 2009 at 2:17 am
  
  Woops. I found it. “showRemoveIcon”
  
  Reply
Ján Regeš says:

July 17, 2009 at 5:23 pm

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. Hillel says:
  
  July 17, 2009 at 5:30 pm
  
  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
Pingback: AutoComplete « Mjcprasad’s Blog
Mike Orth says:

August 7, 2009 at 4:57 pm

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
1. Hillel says:
  
  August 7, 2009 at 5:00 pm
  
  Mike,
  
  Thanks, that’s a good suggestion. I’ve incorporated the change.
  
  Reply
Matt says:

August 13, 2009 at 6:52 pm

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. Hillel says:
  
  August 13, 2009 at 7:19 pm
  
  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
demo says:

August 17, 2009 at 12:59 pm

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. Hillel says:
  
  August 19, 2009 at 1:06 pm
  
  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
Manna says:

August 17, 2009 at 2:39 pm

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
Manna says:

August 17, 2009 at 6:11 pm

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. Hillel says:
  
  August 19, 2009 at 10:28 am
  
  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
Manna says:

August 20, 2009 at 7:43 am

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. Hillel says:
  
  August 20, 2009 at 11:12 am
  
  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
  1. Arun says:
    
    December 4, 2011 at 7:36 am
    
    I Am not still clear will explain me plese
Toton says:

August 20, 2009 at 10:59 am

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
1. Hillel says:
  
  August 20, 2009 at 11:14 am
  
  Toton,
  
  Give this a try…
  
  autoComplete.flowBox.maxHeight =
  
  Reply
David Cardinal says:

August 21, 2009 at 7:52 am

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
1. Hillel says:
  
  August 24, 2009 at 6:19 am
  
  David,
  
  Yup, my autoComplete is definitely bigger. That’s actually why I split the component into the basic one and the advanced one.
  
  Here’s a way to cut down on the size of the final SWF.
  
  Using the framework RSLs in Flex Builder
  http://livedocs.adobe.com/flex/3/html/help.html?content=rsl_09.html
  
  Also, this may be obvious (I missed it at first), make sure you’re exporting a release build (so you don’t include the debug code).
  
  Reply
Fayad says:

August 22, 2009 at 5:02 pm

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
1. Hillel says:
  
  August 24, 2009 at 6:22 am
  
  Fayad,
  
  I think your issue may be similar to this comment
  
  http://hillelcoren.com/flex-autocomplete/#comment-1274
  
  Please let me know if this doesn’t solve your problem.
  
  Reply
Toton says:

September 1, 2009 at 8:30 am

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. Hillel says:
  
  September 1, 2009 at 8:54 am
  
  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
Toton says:

September 2, 2009 at 7:14 am

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
Murali says:

September 17, 2009 at 1:45 pm

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. Hillel says:
  
  September 17, 2009 at 2:23 pm
  
  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
Jamie Badman says:

September 21, 2009 at 12:54 pm

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
Vee says:

September 29, 2009 at 8:55 pm

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. SG says:
  
  November 25, 2009 at 4:47 pm
  
  Can you please send source code on my mail send me your mail so I can contact you?
  Thx!
  
  Reply
  1. Hillel says:
    
    November 26, 2009 at 7:37 am
    
    SG,
    
    The source code is available as a download on the blog.
Vee says:

September 29, 2009 at 9:01 pm

Well, it seems I have no permission to put the code in here.
Mail to me if you need it 🙂

Reply
1. Hillel says:
  
  September 30, 2009 at 9:05 am
  
  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. SG says:
    
    November 26, 2009 at 12:52 pm
    
    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!
  2. Hillel says:
    
    December 8, 2009 at 6:58 am
    
    SG,
    
    The component currently doesn’t support this. I seem to be getting this request a lot lately, I’m going to consider implementing it in a future release.
    
    For now… here’s a comment which discusses a hack implementation of this sort of feature.
    http://hillelcoren.com/2009/07/03/flex-autocomplete-version-1-0/#comment-1054
Manna says:

October 14, 2009 at 9:46 pm

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. Hillel says:
  
  October 15, 2009 at 9:09 am
  
  Manna,
  
  The solution you’re using is what I would have recommended…
  
  Reply
Angeline says:

October 27, 2009 at 1:50 pm

Hi Hillel,
Where is the link for the simple auto complete box without all the extra features?

Reply
1. Hillel says:
  
  October 27, 2009 at 5:09 pm
  
  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
Guy Djemal says:

November 9, 2009 at 4:01 pm

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. Hillel says:
  
  November 9, 2009 at 4:23 pm
  
  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. Guy Djemal says:
    
    November 9, 2009 at 5:27 pm
    
    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. Hillel says:
    
    November 9, 2009 at 5:35 pm
    
    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.
ёклмн says:

November 27, 2009 at 7:42 pm

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

Reply
Guy Djemal says:

December 14, 2009 at 1:50 pm

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
Guy Djemal says:

January 13, 2010 at 10:31 am

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
1. Hillel says:
  
  January 17, 2010 at 10:09 am
  
  Guy,
  
  Thanks for submitting the fix, I’ll have it in the next version. I’m hoping to release a 1.1 sometime soon.
  
  Best,
  Hillel
  
  Reply
VawAverenaw says:

January 16, 2010 at 6:03 am

А мне блог понравился

Reply
Devin says:

February 12, 2010 at 7:47 pm

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. Hillel says:
  
  February 14, 2010 at 2:16 pm
  
  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
tmv says:

February 12, 2010 at 11:43 pm

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. Hillel says:
  
  February 14, 2010 at 2:20 pm
  
  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
Sourav says:

March 4, 2010 at 7:14 pm

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
1. Hillel says:
  
  March 8, 2010 at 9:05 pm
  
  Sourav,
  
  I don’t believe you can use the embed tag inside of the xml.
  
  Try something like this… http://old.nabble.com/Menu-icons-not-displayed-td15214090.html
  
  Reply
Ben says:

March 16, 2010 at 6:04 pm

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. Hillel says:
  
  March 18, 2010 at 10:29 am
  
  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. Ben says:
    
    March 30, 2010 at 5:19 pm
    
    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
  2. Hillel says:
    
    March 31, 2010 at 9:13 am
    
    Ben,
    
    I’m not sure, are you using custom code for the itemEditEnd event (if so could you please post it).
Sundar says:

April 9, 2010 at 8:20 am

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. Hillel says:
  
  April 11, 2010 at 9:35 am
  
  Sundar,
  
  Try using the following function as the filterFunction
  
  private function filterFunction( item:String, searchText:String ):Boolean
  {
  return true;
  }
  
  Reply
Sourav says:

April 11, 2010 at 7:59 am

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. Hillel says:
  
  April 11, 2010 at 9:47 am
  
  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
Sundar says:

April 12, 2010 at 1:39 pm

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
1. Hillel says:
  
  April 13, 2010 at 4:58 pm
  
  Sundar,
  
  I’m not sure I follow, these are the getter/setter to the same function. For an example of how to use the filter function check out the documentation (http://hillelcoren.com/flex-autocomplete/documentation/).
  
  Reply
Gaurav says:

June 23, 2010 at 12:19 pm

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. Hillel says:
  
  June 23, 2010 at 4:32 pm
  
  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
krunal panchal says:

June 25, 2010 at 11:00 am

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. Hillel says:
  
  June 25, 2010 at 12:02 pm
  
  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
krunal panchal says:

June 28, 2010 at 12:24 pm

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. Hillel says:
  
  June 28, 2010 at 12:31 pm
  
  krunal,
  
  WordPress swallowed your sample code. Could you please email it to me…
  
  Thanks
  
  Reply
  1. krunal panchal says:
    
    July 5, 2010 at 7:48 am
    
    Hi Hillel,
    
    I have dropped email to you for the same.
    
    Regards,
    Krunal
leon says:

July 21, 2010 at 12:41 pm

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
1. leon says:
  
  July 22, 2010 at 6:47 am
  
  hi hillel,i have fix it,just make the “_autoSelectFuntion” to false
  thanks again
  
  Reply
  1. Hillel says:
    
    August 4, 2010 at 2:28 pm
    
    Leon,
    
    Happy to hear you were able to figure it out.
    
    Best,
    Hillel
krunal panchal says:

August 20, 2010 at 2:31 pm

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. Hillel says:
  
  August 20, 2010 at 3:16 pm
  
  Krunal,
  
  You should be able to add a focusIn event listener and call showDropDown()
  
  Reply
  1. krunal panchal says:
    
    August 25, 2010 at 11:45 am
    
    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
  2. Hillel says:
    
    August 25, 2010 at 5:11 pm
    
    Krunal,
    
    Have you seen this comments: http://hillelcoren.com/flex-autocomplete/documentation/#comment-3125
    
    It might be of help…
Shankar says:

August 23, 2010 at 5:13 am

Hi Hillel,

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

Thanks,
Shankar.

Reply
1. Hillel says:
  
  August 23, 2010 at 2:33 pm
  
  Shankar,
  
  This is happening because we use the comma for separating items when multi-select is enabled. In the next version I plan to add the ability to specify which character to use as the delimiter. For now here’s a comment which explains the changes you can make to the source to fix this.
  
  http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-941
  
  Best,
  Hillel
  
  Reply
  1. Shankar says:
    
    August 24, 2010 at 1:57 am
    
    Thanks Hillel, its working perfectly.
Patrick says:

August 30, 2010 at 8:08 am

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. Hillel says:
  
  August 30, 2010 at 7:20 pm
  
  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
Bhaskar Mannava says:

August 19, 2011 at 7:29 pm

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. Hillel says:
  
  August 22, 2011 at 8:15 am
  
  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
Saidi Reddy.S says:

October 7, 2011 at 1:24 pm

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
1. Hillel says:
  
  October 7, 2011 at 1:26 pm
  
  I’m sorry, I’m not aware of an autocomplete which is suitable for a mobile project.
  
  Reply