The best way to learn how to use the component is to use the Demo to see what options are available and then reference the source code in the examples folder to understand how it’s implemented. It’s also a good idea to skim through the methods and properties in the ASDoc file (as the demo doesn’t use every property/method available). Here are the two files: AutoComplete and AdvancedAutoComplete.
Although the component doesn’t extend from the ComboBox class, it’s designed to have as similar an interface as possible. For example, it implements the filterFunction, labelFunction and selectedItems properties as well as others.
Here’s the simplest possible implementation of the component.
<?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"] );
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" />
</mx:Application>
While there are a fair number of settings you can adjust, I’d like to start by the showing the way I generally use the component.
<components:AutoComplete dataProvider="{ _data }"
prompt="Please select" backspaceAction="remove"
selectedItemStyleName="underline"/>
I’ve set three properties which I’ll review quickly here.
selectedItemStyleName: Controls the look of the selected items. There are four choices: macMail, facebook, underline and none.prompt: A string to display when no value is set.backSpaceAction: Determines what to do when a user clicks backspace. By default we focus the item (ala Mac Mail) but this can be changed to remove it.
Working with the data
Like most other Flex components you can set either the labelField or labelFunction property. By default this will control how the item is displayed through out the component (in the drop down, once selected and in the browsers).
You have a couple of choices for customizing the drop down label. You can define a dropDownLabelFunction which returns an HTML string to handle formatting the item. This is used in the email demo to display the person’s email address (ie, “Homer Simpson “) in the drop down. If you’d like greater control you can set a dropDownItemRenderer. This can be seen in the Color Chooser demo.
If multiple selection is enabled the component can contain both selected items and a search string. Because of this I’ve need to add a searchText property which can be used to get/set the search string. The text property returns a string representation of the selected items.
Related to this there are two main events which the component dispatches: change and searchChange. The change event is dispatched when the selectedItem property changes, while the searchChange event is dispatched when the search string is changed.
To filter the data you can either use the built in options by setting the “matchType” property or create a custom filter by setting a value for the “filterFunction” property. The built in options are:
beginning: Only match the beginning of the string.word: Match the beginning of any of the words in the string.anyPart: Matches any part of the string.
All of the built in options perform a case-insensitive search. Here’s how you could use the filterFunction property to implement a case-sensisitve search.
<mx:Script>
<![CDATA[
import com.hillelcoren.utils.StringUtils;
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["ONE", "TWO", "THREE"] );
private function filterFunction( item:String, searchStr:String ):Boolean
{
return searchStr == item.substr( 0, searchStr.length );
}
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" filterFunction="filterFunction"/>
To select items you have three options, you can use either selectedItem, selectedItems or selectedItemId. The first two options are pretty standard so I won’t cover them here. Setting the selectedItemId property will cause the component to search the items in the dataProvider for an object with a matching id. By default, it looks for a field called “id” on the item but you can set a custom field using the keyField property.
Out of the box the component requires the user to select an item from the list. You can allow the user to enter their own values by setting allowNewValues to true. You can then control whether or new the new items are editable by setting the allowEditingNewValues property. Additionally, you can set the allowDuplicates property to control whether or not to allow an item to be selected more than once.
A common question is how to use the component with data returned from the server. The best practice is to use a change listener. Once the user has entered enough characters fire off your data request. Once the data has been returned and passed to the dataProvider you can call the search() method to tell the component to filter the items and display the drop down. You can check out the DynamicData.mxml file in the examples folder to see the details.
You can use either an ArrayCollection or an XMLListCollection as the dataProvider. I showed you an example with an ArrayCollection earlier on, here’s an example using an XMLListCollection.
<mx:XML format="e4x" id="xml">
<items>
<item>one</item>
<item>two</item>
<item>three</item>
</items>
</mx:XML>
<mx:XMLListCollection id="xmlList" source="{ xml.item }"/>
<components:AutoComplete dataProvider="{ xmlList }"/>
Usability settings
Multiple Selection
This is the one feature which separates the component from other the AutoCompletes out there, setting the allowMultipleSelection to true enables the user to select more than one value. The AdvancedAutoComplete extends this feature by adding a selectionLayout property which when set to vertical causes the selected items to be displayed in a List component.
AutoSelect
The AutoSelect functionality will automatically select an item if it matches a case-insensitive string comparison and is the only match found. This feature can be disabled by setting autoSelectEnabled to false.
If you’d like to use a custom function to determine if an item should be auto-selected you can set a value for the autoSelectFunction property. Here’s an example where we use this property to auto-select once when there is a single match. For example, typing “o” will select “one” right away.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["one", "two", "three"] );
private function selectFunction( item:String, searchStr:String ):Boolean
{
return true;
}
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" autoSelectFunction="selectFunction" />
Clear Icon
The core of the component is the PromptTextInput class. This class provides two main features: the prompt and the clear icon. We covered the prompt earlier but the clear icon is a little gray x icon which appears if there is text in the component. Note, this feature only works if allowMultipleSelection is set to false.
Drop Down
The number of items displayed in the drop down is controlled by the dropDownRowCount property. By default, the width of the drop down will
be set to match the width of the TextInput. However this can be overriden using the dropDownWidth property. On the topic of the drop down, you can use the showDropDown, hideDropDown and isDropDown visible to show/hide the drop down.
AdvancedAutoComplete
The challenge in building a component with lots of features is keeping it as streamlined as possible. In order to support adding more advanced functionality while not bloating the component I’ve created an AdvancedAutoComplete class which extends the AutoComplete component.
Selection Layout
As discussed earlier, setting the selectionLayout to vertical causes the items to be displayed in a List. When using the vertical layout you can use the showRemoveButton property to control whether or not to show a remove button.
Browsing
This can be enabled by either setting the showBrowseButton property to true, or by adding an options to the action menu (as is demonstrated in the Color Chooser Demo). By default we show a pop window which contains a searchable DataGrid. You can control which fields of the data to display in the grid using the browserFields property. If multiple selection is enabled, you can set the useListBuilder property to true to display a two column browser instead. If you’d like to implement your own browser you can either extends one the existing ones are create a component which implements the IBrowser interface. You’ll then need to set the browserClass property to your new class.
Ordering
If the selectionLayout is set to vertical you can enable the user to order the items in the list by setting the showOrderButtons property to true. If using the List Builder the ordering buttons will also be displayed in it.
Actions Menu
To enable the action menu you need to set a value for the actionsMenuDataProvider. This is just a regular Flex Menu component so all the usual features are supported (ie, using checkboxes). Here’s a link to the supported menu attributes. You can see an example of how to use this feature in the code for the AdvancedDemo. If enabled the menu can be displayed by pressing the down button while the component has focus.
Odds and Ends
Custom Skins
The selected items are simply buttons, this means it’s pretty easy to change the look and feel using skins. The styles which the component comes with (macMail, facebook, etc) are all implement using skins. It’s possible to define your own custom skin. If you’d like to implement it you can check out the CustomSkin.mxml file in the examples folder.
First Class Components
The component is made up of a number of classes. Some of these classes are useful in their own right. I consider the following three classes to be first class components:
- PromptTextInput: This is a TextInput with two additional features, you can set a prompt which will appear when no value is set and a clear icon will appear when there is a value set and the mouse is over the component.
- ListBuilder: This is a two column browser which can be used to add/remove items from a list.
- CloseableTitleWindow: Adds a key listener to the TitleWindow which enables the user to click the ESC key to close it.
Utility Classes
The com/hillelcoren/utils folder contains a couple of helper classes. There are some useful functions here which you may be able to use elsewhere in your applications. Some examples include a function to compare if two ArrayCollections are equal and functions to convert string to/from camel caps.
Validating
You can use a regular validator to make sure that a value is selected. Here’s a simple example demonstrating how to implement it.
<mx:Validator source="{ autoComplete }" property="selectedItem"/>
<components:AutoComplete id="autoComplete" dataProvider="{ _data }"/>
Inline Button
You can use the inlineButton property to set a button to appear at the end of the component. This feature is used in the AdvancedAutoComplete for the button used to display the actions menu. Here’s an example of how you can use this property to display a button which causes the drop down to appear (ala a regular ComboBox)
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["one","two","three"] );
private function handleButtonClick():void
{
if (autoComplete.isDropDownVisible())
{
autoComplete.hideDropDown();
}
else
{
autoComplete.search();
autoComplete.showDropDown();
}
}
]]>
</mx:Script>
<components:AdvancedAutoComplete id="autoComplete" dataProvider="{ _data }">
<components:inlineButton>
<mx:Button skin="mx.skins.halo.ComboBoxArrowSkin" click="handleButtonClick()"/>
</components:inlineButton>
</components:AdvancedAutoComplete>
That about does it, hopefully you found this useful. I plan to continue to improve the documentation over time. If anything here is unclear, or if there are other areas you’d like me to cover please post a comment and I’ll update the page.
Best,
Hillel
Hillel Coren 
Can i use the same Flex 3.2 or it can be used only in Flex 4
Vinay,
There are currently two versions of the component. The main download link works on Flex 2/3, There is a separate version for Flex 4.
A great work…Thanks for the reply
Great.
Flex 4 version link doesn’t open.
Gobi,
I just tried it… it’s working for me… not sure what the issue is. Can you please try again. If it still doesn’t work I can email you the file.
Thanks for reply.
please send the link or file. if possible
Hi,
First of all, great work. I tried to accomplish something similar but I end up with something totally different.
Would it be possible to have a future version with the list (dropdown) staying down until we close it (to avoid reopen it each time we’d like to add a selection) ? That’s what I tried to achieve with my component (send me an e-mail and I’ll send you a link to see it).
Thank you for your great work anyway.
Christoph
If I’m understanding correctly what you’re trying to do, you could accomplish that by modifying the source code.
Try commenting out the call to hideDropDown in the handleSelectedItemsChange function in AutoComplete.mxml
Hope this helps,
Hillel
Thank you for your answer, to be honest I didn’t play with it yet (in flex builder) but as soon as I can I’ll try =)
I especially like your browse option btw.
Regards
Chris.
Just curious if there is an option to open the drop-down by default when you put focus on the advanced auto complete component? I have a list of names and when the user clicks in the text input of the advanced auto complete, I’d like for the drop-down to open automatically…is that possible?
Also, if I click in the advanced auto complete component and hit the backspace to delete the currently selected item, and then I move focus off of the component without selecting something new, is it possible to re-display the last selected item in the list instead of it remaining blank? Does that make sense?
Rob,
Point one: you could use a FocusIn event listener and use it to call showDropDown().
Point two: this one’s a bit tricker, I’d suggest storing a copy of the selectedItems and then use that to compare the new values to the old ones on focus out and replace them when necessary.
Hey again! I got Point 2 working flawlessly, which I thought would be the more difficult of the two to accomplish…I cannot for the life of me get the drop-down to appear either with MOUSE_DOWN or FOCUS_IN…it simply ignores me call to the advanced auto complete’s showDropDown() method. Any ideas?
Thanks again!
Rob,
Try calling search() instead
Nope – that just blanks the currently selected item’s label out – which is actually good for me, removing the need for my users to have to hit the backspace in order to begin a new search, but it doesn’t show the drop-down. I guess I can live with this for now, but it would be really great to have the ability to show the drop-down by default upon mouseDown or something like that. I didn’t try it with the regular auto complete component…maybe it’s just something with the advanced auto complete because of the browser, etc.?
Rob,
I think I’ve figured it out. The drop down is being displayed, but… it’s getting closed right away. Try the following.
private function handleFocusIn():void { callLater( _showDropDown ); } private function _showDropDown():void { autoComplete.showDropDown(); }Wow – thanks SO much for such a quick response. This component is truly awesome, so thank you so much for making it available to all of us. Thanks for the hints too!
I am trying to modify the advanced auto complete component so that I can let the user pick just one value and then display the value as “text” for the component.
To achieve this I set allowMultipleSelection=”false” selectionLayout=”horizontal”. The issues I am running into are:
1) The text is not being displayed as plain text.
2) The component works fine for the first time i pick a value, but after that if I deleted the text from the component and select a different value, the new value is not being displayed in the text.
Just wanted to see what changes i need to make to get the advanced component to work as a text field with auto complete feature?
Santosh,
I’m sorry, although your request sounds easy it’ll actually be quite difficult to implement. When the user selects an item we replace the text with a button (which has the text as the label). If you don’t need multiple selection you may be better of using the Adobe Team’s AutoComplete component.
That being said, I’d suggest checking out this thread in the comments. I worked out a way for a user to edit the items once selected which may solve your issue.
http://hillelcoren.com/2009/07/03/flex-autocomplete-version-1-0/#comment-1054
Hope this helps,
Hillel
Really great (as always)!
Thanks for the nice documentation!
Cyril
Fantastic looking component!
I had a thought that might extend the usability of your component:
When working with a database, sometimes we just want to reference an item that exists already… but what if it doesn’t exist?
An button as the first item in the drop-down list would be useful for people working with auto-complete in such a fashion. I would love to implement this feature, but am unsure of what function(s) would need to be extended to get such a feature to work. Could you kindly point the way?
— handleFocusOut ?
I could probably extend here and branch into code for capturing data to generate a new item. Where could this functionality be added to simulate the above? ( button at top of list)
John,
I have a similar issue in the application I’m currently working on. My solution was to use the action menu in the advanced autoComplete and add a “add item” option.
Hillel,
Great component, and thank you for creating it. One thing I’m struggling with: how do you programatically select values?
Mike,
There are a number of ways to select items but the simplest approach is to add the item to the selectedItems property.
Here’s an example http://hillelcoren.com/flex-autocomplete/#comment-1242
Let me know if you need any more help getting it working
Hillel,
The one problem I’m still having is programmatically adding selectedItems on a multipleSelect control. Single-select works fine, but multiselect doesn’t.
I currently iterator over the dataProvider, find the items I want to select, add them to an ArrayCollection, and then set the AutoComplete.selectedItems property to that ArrayCollection. However, the Autocomplete control shows no selections.
Mike,
You should be able to skip the middle step (of creating an ArrayCollection) and just add the items to the AutoComplete’s selectedItems property directly.
Hillel,
That doesn’t seem to be working. I don’t get any errors, but the control doesn’t show any selections.
Mike,
Here’s an example demonstrating what I mean, it seems to work for me. If you could create a sample app demonstrating your problem it’d be really helpful.
<?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(); private function handleClick():void { autoComplete.selectedItems.addItem( "test" ); } ]]> </mx:Script> <mx:HBox> <components:AutoComplete id="autoComplete" dataProvider="{ _data }" allowMultipleSelection="true" allowDuplicates="true"/> <mx:Button label="Add Item" click="handleClick()"/> </mx:HBox> </mx:Application>This component works really well. I’m using it in a mail client (www.universalinbox.com) and I’m trying to find a way to delete items (by pressing the delete key). If I use an item renderer and list for the keydown event, it is not fired.
Any ideas?
Mario,
I’m not sure I follow completely. The item renderer is used for the drop down, why add a listener to it?
One approach would be to extend the component and override the handleKeyDown function.
Ok, that makes sense. Let me try that.
Thanks,
Your component looks great. Nicely thought out. My only concern is accessibility. The project I’m working on requires the UI to be accessible, and this component is not based on one of the Flex accessible components–so I assume it is not accessible (e.g. to a Jaws reader). Is that correct?
Henry,
To be honest I’m not sure either way. I’ve never tried using it with something like the Jaws reader.
I’d be happy to help you make it accessible though.
I’m using the ListBuilder class, and everything is working great overall, but I’ve ran into a couple of minor items I thought I would ask about.
1. At the moment, I’m loading around 2000 items into the left list. If I move 1000+ items in a drag drop at once, this takes some time ( 5 – 10 seconds) and during this time the browser appears to not be responding. Where would you suggest making a change in the class to handle large moves of data (whether drag drop or the arrows)?
2. For some reason, after I do a drag/drop, the left pane scrolls when I move the mouse up and down, with no buttons clicked and I just move the mouse above or below the left listbox. Even if I click elsewhere in the app, the right pane, etc. it continues to do this. If I use the arrow buttons to move the data, this doesn’t happen. If this doesn’t make sense I can send a quick video clip showing it if that would help.
Thanks!
Jon Keener
Jon,
I’m sorry, I don’t think I’m going to be much help here.
1. I checked over the code and I don’t see any room for optimization.
2. Yeah, I’ve seen that as well but haven’t had any luck in solving it.
One thing I’ve done in the past with timely processes that lock up the browser is interrupt a process periodically with a setTimeout() call and deploy ProgressEvents to update a ProgressBar. People are much more patient when they see something making progress. The detriment to running time is more than offset by the user experience. I’d suggest looking at the ArrayCollectionUtils moveItems() call and setting a counter for every 100 items or so.
Hi, I was wondering if it is possible to have the suggested result come out as text instead of a button. Thanks.
Jan,
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
Hillel,
reading the comments here, i’ve noticed that you’ve gotten several requests for the “add selected item as text instead of button”
i would like to add my own request for this functionnality if you don’t mind.
great job on the component, the documentation and especially your availability in helping us out.
Cheers,
Pier
Pier,
Yeah, I’m getting that request a lot. I’m going to look into implementing it in the next version.
Thanks for your kind words,
Hillel
Thanks for this awesome component Hillel
I have a question, How can i programatically clear the selecteditem? I did it by passing null to selectedItem but then i dont get “prompt” string.
Thanks in advance
Ali,
To clear the component use the following (I plan on adding a clear method in the next version)
autoComplete.searchText = null;
autoComplete.selectedItems.removeAll();
Thanks, works like a charm 🙂
yeah, that clear method would be great.
Thanks once again.
I don’t get the prompt string after I clear it, is there a way to restore the prompt string?
You have to issue the statements in the correct order:
p_artists.selectedItems.removeAll();
p_artists.searchText = null;
will restore the prompt, if you reverse the order – the prompt does not appear.
I’m really impressed with how well this component works. It took a little fidgeting to get it to allow me to work with both objects (for the base search data) and new items (which are just strings), but it feels really snappy and handles focus stuff really well (which I’ve always found a pain).
Thanks for providing it!
Chris,
Happy to hear it’s working well for you.
Let me know if you run into any issues.
Best,
Hillel
Hi Hillel,
I am here again with a problem, how can i dynamically set the height of each item renderer? I tried it by not setting height of the VBox based item renderer but list add scrollbars to that specific item rather than rendering it according to its exact height.
Thanks a lot 🙂
Ali,
Do you mean the items in the drop down or are you referring to the selected items?
item, each item should have a different height, Please look this image, i want to do like this
I have done all the data related thing, but im unable to give different heights to each item like this
thanks
Ali,
Thanks for the picture, it was very helpful. To implement something like that you’re going to need to use a dropDownItemRenderer. The ColorDemo provides a good example. Inside the item renderer you can adjust the height of the component. But… there’s a catch. You’ll need to use the source code to make this work as you’ll need to make the following modification. Add this line to the createDropDown function in AutoComplete.mxml.
_dropDown.variableRowHeight = true;
Let me know if you run into any issues
_dropDown.variableRowHeight = true;
This is exactly what i came here looking for.
So i’m now getting variable row heights alright, but the overall dropdown height is the same as if each row had the same height. Meaning that I have my rows, with their personnal heights, and then, after the last item in the list, there’s a lot of blank space
Pier,
Based on the comment in this post (http://blog.flexexamples.com/2007/10/28/resizing-a-flex-list-control-using-the-rowcount-property/) it looks like there’s an issue when using the rowCount property to set the height of the list when variableRowHeight is set to true. You may need to add code to manually determine the height of the list.
Hi Hillel,
thanx for the reply. I was afraid it would be a bug. I tinkered a bit with the source code this weekend but haven’t managed yet to implement it with the autocomplete component. The only way i’ve found so far to determine each individual row’s height has been to access the listItems protected property in the List component (_dropDown in the autocomplete) but being protected, I’d have to extend the list, modify its source and use that as the _dropDown’s type.
Hi Hillel,
Thanks for the reply, but i couldnt compile it, my mistake. could you please point me to any link where i could learn how to compile a library?
Ali,
Here ya go… http://livedocs.adobe.com/flex/3/html/help.html?content=projects_7.html
Hello Hillel
here is the sample I created using your component:
http://cassinlwbg.facebook.joyent.us/facebookTestApp/main.swf
Type in “M” to open it.
However, I don’t know what the style of the selected values is always like the standard button?
I want the look and feel like on facebook.
Regards,
Mirza
Mirza,
Are you using the source or the SWC? If you’re using the source, the defaults.css style sheet needs to be added manually. You should then just need to set the selectedItemStyleName property to “facebook”.
I’m using the source and I compile with the SDK, not the flex builder.
Where should I put the css file?
Mirza,
Add the following tag to your app: (you’ll need to set the path to the file)
<mx:Style source=”defaults.css”/>
Im Mirza not Mizra 🙂
I cant see the full comment you sent, can you repeat the code?
thanks!
Mirza,
Sorry about that…
<mx:Style source=”defaults.css”/>
thanks Hillel, got it!
Hi Hillel,
first thanks for your great component.
I use the AutoComplete.mxml component in a project right now and have following situation:
As a dataProvider I use a ArrayCollection over String-Objects. Some Strings have a pretty similar name:
e.g:
Windows XP-Standard
Windows XP-Demo
Windows XP-Start
Windows XP-No
Windows XP-Stop
When I start to search by entering “wind” the first item (Windows XP-Standard) will be autoselected and the other ones are shown underneath. When I press enter the search result is Windows XP-Standard. Works like it should.
But what I need:
When I search for “wind” the result should be all Strings where the string “wind” is included and not only the first item. That would be a list where the String “wind” is a part of. I tried to prevent to autoselect the first item of the dropdown list but it did’t worked out.
Do you know how I could handle that?
Thanks
Konrad,
I’m sorry, I follow you up until the “what you need” part. Could you please try explaining it another way.
Hi all,
First thank you for the time you spend to create this component, it’s very helpful and works very well for my purpose.
Actually I use it for enabling user to select a zipCode among a restricted list of french Zip code.
Here is my problem, I would like to handle the fact that user enter a restricted zip code and display a warning message.
In other word, I’m looking for a way to detect if the completion failed.
Thanks
Ben,
You could use a validator…
<mx:Validator source=”{ autoComplete }” property=”selectedItem”/>
<components:AutoComplete id=”autoComplete” dataProvider=”{ _data }”/>
Thank you for your answer
I’m not sure a validator is what I need or maybe I don’t understand how to use it. I don’t want to validate the data at the end of user input.
What I want is to to be warned as soon as the drop down list become empty.
can you tell me if it’s actually possible with validator and how to do this or if there is another way to get over this issue.
Again thank you for your answer
Ben,
Give this a try…
<?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"] ); private function handleSearchChange():void { callLater( checkValid ); } private function checkValid():void { autoComplete.errorString = autoComplete.dataProvider.length == 0 ? "Not valid" : ""; } ]]> </mx:Script> <components:AutoComplete id="autoComplete" dataProvider="{ _data }" searchChange="handleSearchChange()"/> </mx:Application>This works well and behaves exactly as I want
Thank you for your help
I having an issue with the selectedItemStyleName it stays as default mac style no matter what i define
TJ,
Are you using the source code or the SWC?
Thanks Hillel 🙂
But i am facing the same problem which explained earlier by Pier.
So when should we expect newer version which will have dynamic height for each row individually?
Ali,
I’m sorry if I wasn’t clearer, the issue with the List component (not the AutoComplete). It looks like you can’t use the rowCount property to set the height when variableRowHeight is true.
Pier, if you come up with a solution could you please send it to me and I’ll pass it along to Ali.
Hi Hillel,
it’s me again. I’ve been getting an odd behavior when using the arrow keys in the dropdown menu.
When the dropdown is open, using the up and down keys skips & highlights only every other row.
The odd thing is that when i switch to debug mode and put a breakpoint in the handleKeyDown function and go step by step, it works correctly. It only skips when in realtime o.O
The dataprovider is filled with {label, id} objects.
I am using a dropDownItemRenderer which is just a Text field in which I modify labels that are too long, truncating them and adding “…” at the end.
I haven’t yet found where this could come from. Would you, or someone else, have any ideas?
Thanx for the help
Pier
Pier,
Hmmm… I’m not sure. If you could send me a sample app which demonstrates the problem I’d be happy to help you debug it.
Also (in case you didn’t notice the other comment), it looks like Ali is also trying to implement variable row heights in the dropDown. If you implement a solution could you please send it to me so I can pass it along to him.
Hillel,
concerning the variable row height, i saw the other comment. i’ve put that problem aside for the time being and gone with the points of ellipsis solution. but eventually, my client will be asking for the variable row height solution so i’ll keep at it too and if i find a solution will share without a doubt.
as for my arrow keys bug, unfortunately, i can’t send you my app as it is a client’s. i’m trying to reproduce it in a sample app but haven’t had any luck so far. will keep you posted if i make any noticeable strides.
thanx for your reply
Pier
Hillel,
concerning my bug where the arrow keys skip an item in the dropdown menu, it seems to be linked to an other bug i have found in my app.
When in an input field, in FireFox 3.5 or higher, the use of arrow keys skips characters, and the delete key erases two characters.
This bug has been listed in Adobe’s Bug & Issue Management System here: http://bugs.adobe.com/jira/browse/FP-2338
Seems to stem from the wmode attribute.
Bug hasn’t been fixed yet
Hillel,
What is your recommended way of getting the resulting data from the Autocomplete component after the user has finished entering all their choices, with the help of the autocompletion list?
The reason I ask is that the autocompletion list has a nice dataProvider, which can be an ArrayCollection of value objects, but the backing for the contents of the flowBox ends up being just the text property, a String, that will need to be parsed again–or am I misunderstanding. I guess if allowNewValues is false, then in theory there could be some kind of dataProvider backing the resulting contents of the flowBox. This is a challenge for any AutoComplete component.
–Henry
Henry,
Have you tried the selectedItems property
Hi Hillel:
The autocomplete component is very easy to implement, although I am having hard time to implement carriage return. The user wants to hit enter key as an alternate to click a button.
Thanks,
Mithu
Mithu,
When you say “hit enter as an alternate to click button” which button are you talking about? The default behavior in Flex is that the spacebar activates a button.
Hillel:
Thanks for your prompt reply. The user wants to hit the enter to execute a command, instead of using a spacebar. I mean the enter key(carriage return on the keyboard). There are still a lot of users heavy on using the enter key.
Thanks,
Mithu
Mithu,
This post seems to provide a decent solution
http://stackoverflow.com/questions/462618/whats-the-best-way-to-cause-a-flex-3-button-to-respond-to-the-enter-key
I love this control!! I’ve been using it extensively in some applications I have been developing.
One item I ran into recently was with the validation error popup. In the following situation, it behaves wierd.
1. AdvancedAutoComplete component is inside of a FormItem
2. the FormItem has the required property set to true
3. A validator is set up (like the docs above say) with required set to true.
4. The showBrowseButton is set to true on the AdvancedAutoComplete
What happens, is that the error popup mostly shows up next to the textbox, covering the browse button, when mousing over. It also sometimes bounces back and forth between the text box and the browse button.
Are you aware of any sort of simple fix for this? Thanks!
Here is some sample code (assuming it pastes nicely)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="com.hillelcoren.components.*"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var _data:ArrayCollection = new ArrayCollection( ["one", "two", "three"] ); ]]> </mx:Script> <mx:Validator source="{ test }" property="selectedItem" required="true"/> <mx:Form height="100%"> <mx:FormItem label="testformitem" fontWeight="bold" required="true"> <components:AdvancedAutoComplete id="test" showBrowseButton="true" dataProvider="{ _data }"/> </mx:FormItem> </mx:Form> </mx:Application>Jon Keener
Jon,
Here are a couple of ideas:
– Use the ActionsMenu to enable the user to browse (as seen in the AdvancedAutoComplete demo)
– Manually create/position the errorTip, check out the “Creating custom ToolTips” section http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_4.html#149007
Best,
Hillel
Hi HIllel,
First, thanks for the great job, it’s really a nice component.
I’m having some trouble to handle the selectedItem display though.
All is good when the user clicks on the item in the dropDown list, but when using the keyboard to navigate and select it by pressing “enter” the component actually has it’s selectedItem set, but the item is not displayed in the text imput. That doesn’t happen with the click on an item, the item is displayed correctly in the textInput field.
Is this the expected behavior or have I done something that perhaps has broken the default functionality?
Thanks a lot,
Victor
Victor,
Hmmm.. that’s definitely not the expected behavior. Please try out the demo to see if it works correctly for you. Are you extending the class or adding any custom code. If you could create a sample application which demonstrates the issue I’d be happy to look at it.
Hi Hillel,
Application is hanging if Autocomplete is used in popup windows (e.g. TitleWindow) and try to navigate the list by mouse cursor. It works fine if I use keyboard to navigate the list and select the item by pressing enter but not the mouse cursor.
Do you have any solution for this problem?
Songpol,
I’ve never seen that problem before. It’s actually somewhat interesting that someone just submitted a comment with the exact opposite problem (mouse works/keyboard doesn’t). If you could create a sample application which demonstrates the issue I’d be happy to take a look at it.
Hillel,
It’s actually hanging for a couple minutes and flash runtime will pop the error message with “UIComponent can not get the owner of mouse event”. Any idea for this?
Sorry that I can’t give you an example because my project has so many files and it’s simply huge.
Thanks,
Songpol
No need to worry about this anymore, I have just found that there was one id with name “owner” and that caused the UIComponent tried to capture that id as the owner of the mouse event instead of itself.
Songpol,
Happy to hear you were able to figure it out.
Thanks for letting me know.
Best,
Hillel
Great component Hillel!
I’m using it in Flex 4 and running into what seems to be an odd problem…
When tabbing out of the component, instead of the focus going to the next component (in my case a text input), it seems to reset everything so that the first item that can receive focus gets it.
So, once I tab out of the AutoComplete, the focus does not go to the next field. The focus goes to the first field on my form. Making a bit of an endless loop.
Is this something you’ve encountered or could give me advice on resolving?
Thanks,
REN
REN,
I’m not yet using Flex 4 for my apps so I haven’t spent much time working with the component in it. I’ve found that some of the builds are pretty flaky so I’d definitely suggest making sure you’re using the latest stable build. I’m sorry, as I mentioned in another comment I’m currently focused on getting the next Flex 3 version out the door. I hope to spend more time on the Flex 4 version in the coming months.
Hey Hillel,
that is one fine component! I’ve just got one problem. I’m trying to implement it in an AIR application. The component resides inside a Window-Component which can be opened on demand. Autocompletion works fine, but when the “Browse”-button gets clicked, nothing happens. Do you have any idea what’s causing this?
Just to make sure I didn’t do anything wrong I reduced your advanced demo to what I needed and it worked flawless using the stripped down example mxml. But as soon as I copy the same code into my project and hit the “Browse”-button, nothing happens. I’d really appreciate any thoughts and maybe a solution 😉
Johannes,
I’m sorry, it’s hard for me to say. I guess it’s obvious, but I’d suggest trying to comment our parts of your code to try to determine what’s causing it to fail.
Sorry I can’t be more help,
Hillel
Hi,
When i write a “,” in the Autocomplete, the field empty himself. Is there a solution for this ?
Thanks in advance.
Alexis,
The “,” is used to enable the user to select multiple items at once. In the next version I plan on making this a configurable setting. For now though, this comment/reply details a workaround.
http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-940
Thanks for this great component.
I dont find any way to add entries in the component by programmatic
It’s for the initialisation of the component.
Of course, i can write in the textField whith text property but how can i add not text but box ?
NB : sorry, my english is so bad
sorry for the re-post, i found the way : addItem( )
re-thanks !
Hillel,
The component is working very well, and I’ve found it easy to adapt to my application. The Browser in AdvancedAutoComplete is a key capability for my requirements, especially the feature that de-emphasizes the text in the list when an item has been previously selected. Can you suggest a way to keep the Select button from being enabled when a previously selected item is selected?
Andy,
I’d suggest extending the Browser class and setting your new class for the BrowserClass property. You could then add code to disable the select button.
Hillel, great component. I’ve been using it in my project – Universal Inbox (www.universalinbox.com) for some time now. Thank you.
I have a question about pre-populating entries. I’m using mine for sending out emails and I already have a TO and CC box populated with entries. How can I format those entries so they have the nice styling like when I do an auto complete? Using the addItem method does not seem to apply the styling.
Ok, I found that if I use addItem() and pass in the same object type as my dataprovider, it works some. The problem now is that when I try to remove an item that was pro programmatically added, I get an error of array index out of bounds.
Ok, I got it. I saw another post from you where you mentioned to use .selectedItems.addItem() that worked great.
Thanks.
Mario,
Happy to see you were able to figure it out. Sorry for the delayed response (I was traveling). I realize the addItem function can be a bit misleading, I’m going to try to improve the components interface in the next release to eliminate this confusion.
Hillel,
I’m looking for a way to dynamically search the items from my database instead of pre-loading them into a dataProvider list, because it’d be too much data to pre-load.
Here’s what I tried:
– Set searchChange() to clear the dataProvider and call db-search function
– On db-search result, add the items to the dataProvider and call showDropDown().
It seems to work at first, but at some point the drop-down will just not be shown anymore. Any ideas?
Thanks for you help
Fernando,
There’s a file called DynamicData.mxml in the examples folder which demonstrates the best practice for implementing this. If after reviewing the example you’re still not able to get it working please let me know.
Thanks,
Hillel
Just to complete the last comment, the drop-down stops being displayed if my input text length goes to zero.
I am attempting to use this component with an XMLListCollect, but cannot seem to get it to work. I am using the component as such:
AdvancedAutoComplete dataProvider=”{new XMLListCollection(outage_request.lastResult..element)}” labelField=”@name”
Derek,
I’ve seen issues before when using an XMLListCollection. What problem are you seeing exactly?
I have two of the same AutoComplete component right next to each other. The only difference between the two is one uses the E4X-XML results from an HTTPService
new XMLListCollection(request.lastResult..element)
and the other uses a statically defined XMLList:
new XMLListCollection(xml_list)
the data is exactly the same for both, but when i type in the one using the HTTPService results the pop up doesn’t show. I’ve also tried sticking the lastResult into a variable and then calling the XMLListCollection construction, but the results were the same.
Derek,
I’m sorry, I’m not sure. I’d suggest enabling the browse button so you can look at what’s in the dataProvider. You also may want to use the source so you can step through the code to try to figure out where the failure is.
Oddly, instantiating the XMLListCollection in the dataProvider attribute wasn’t working, but doing it outside and setting it worked. (scratches head)
Derek,
Happy to hear you were able to get it working. Not quite sure why that works, but if it works…
I’m glad I got it working, too. It’s really a great component. Thanks for your help!
The dynamic data seems to be working, thank you.
But… the component is acting strange. I included the .swc in my project, and I get those 2 unexpected behaviors:
– in Firefox, when I press UP or DOWN arrows, it moves twice down or up, instead of once. Tried Chrome and IE, and both work fine.
– the selected styles are not showing at all – always a default Flex button.
Any idea what might be happening, or has anyone experienced the same?
Thanks for the help!
Fernando,
Hmmm… I’ve never heard of the first issue before. I’ve seen the second issue in cases where people use the source but you’ve already stated that you’re using the SWC. Which version of Flex/Flash Player are you using?
Version 10,0,32,18
Fernando,
I have the same version Flash Player and am not seeing the issue (I also haven’t heard reports from any other users). Can you try creating a simple test application and see if you’re able to replicate the problem. Are you’re using the swc in the zip (not your own swc compiled from the source). Also, which version of Flex are you using?
Is it possible to prevent the control from growing in height when the available horizontal space is exhausted?
I’d like to be able to do something similar to mx.controls.Label::truncateToFit where an ellipsis “…” is shown when the text is too wide.
Matt,
You could use “autoComplete.flowBox.maxHeight = ”
The catch is this will show scrollbars, I imagine mplementing an ellipsis solution would be rather tricky. On my list of future features is support for showing “and X more” when there are too many items to fit. It’d be a link which when clicked would show the full list. This approach is used on the iPhone when you send a text message to multiple people.
That works in actionscript, but it doesn’t compile if it’s in the mxml, I add:
flowBox.maxHeight=”50″
and get this error:
Cannot resolve attribute ‘flowBox.maxHeight’ for component type com.hillelcoren.components.AutoComplete.
Steve,
If you’d like to set it in mxml you could extend the autocomplete class and a function to override the default set maxHeight so it’s sets it on the flowbox.
Hi Hillel,
I think I may have found a bug. I’ve got some code that is monitoring FocusEvent.FOCUS_IN and FocusEvent.FOCUS_OUT for the control. Apparently when backspaceAction is set to “focus”, and a selected item takes focus, the FOCUS_OUT event is fired for the entire control.
In my case, I’m changing the state of the container on that event, which destroys the control. As best I can tell, other focus event listeners get notified after the fact and an exception occurs.
Are these events the proper way to be monitoring focus for this control?
Matt,
The component is built using many smaller components. When you click baskspace the component fires a FOUCS_OUT event followed by a FOCUS_IN event (the focus is changing from the TextInput to the SelectedItem). If you want to use the foucs event to set the state I’d suggest using the target property of the event to check if the component is losing focus or if it’s just one of the child components.
Apologies for the barrage of questions this week…
This technique doesn’t seem to work. When the focus is set on a selected item, a FOCUS_OUT event is fired by the UITextInput control, which is indistinguishable from a FOCUS_OUT event for the control as a whole. Does that make sense?
Matt
– There is a google code project which I currently use for SVN
– With the current version of the component you’d have to make some fairly invasive modifications to get that to work. The older version however used to work like that. I’ve uploaded version 0.93 to the google code site, maybe that’ll work for you.
– Hmmm. that’s a good point. The focus event has a relatedObject property, it’s possible you could use that to distinguish between changing focus from one element of the component to another and leaving the component entirely.
Hi Hillel,
I’m here again with two questions.
a- Is there any way to disable those facebook/macbook style boxes? i want simple text when user selects any item from the given suggestions.
b- I clear autoComplete input area with autoComp.text =”” and autoComp.searchText = “”; Is it right way to do so?
Thanks
Ali,
a) http://hillelcoren.com/2009/07/03/flex-autocomplete-version-1-0/#comment-1054
b) http://hillelcoren.com/flex-autocomplete/documentation/#comment-1596
I realize that it can be hard to find these answers by searching through the comments. Both of these items should be addressed in the next version.
Best,
Hillel
re: finding HOWTOs and reporting bugs
Hillel,
Have you considered starting a project for your component on one of the public project sites (google code, source forge, github, etc.)?
I’ve not used it a lot but my understanding is that GitHub is well suited for third party contributions and branches without a requirement to pull everything into the main source trunk.
Is it possible to prevent the list of selected items from wrapping and growing the vertical size of the control?
Ideally, I’d like it to behave like a TextInput; when the available horizontal space is exhausted the current selected items will scroll out of view left or right depending on cursor position.
How can you safely disable the control?
I mean enabled=false, still let’s you select the selectedItem and delete it and also allows text focus.
Nathan,
Setting enabled to false seems to be working for me. Here’s the sample app I created to test 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> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var _data:ArrayCollection = new ArrayCollection( ['one','two','three'] ); ]]> </mx:Script> <components:AutoComplete dataProvider="{ _data }" enabled="{ checkBox.selected }"/> <mx:CheckBox id="checkBox" selected="true"/> </mx:Application>Sorry, I was doing something stupid. Cheers and thanks for this wonderful component!!!
i have used EmailDemo component. in the list i am able to get the lists. but i am unable to reset the value of to address autocomplete component to empty dynamically using actionscript.
Can u help me?
Thanks in advance.
kranthi
Kranthi,
Check out this comment: http://hillelcoren.com/flex-autocomplete/documentation/#comment-1596
@kranthi – I’m not sure if this is the best way to handle it but, if you want to clear the current filter without removing the previously selected items, try calling search() with an empty search string.
Hillel,
I continue to use your component and it is wonderful. My question is what happens when one uses the tab key. When I enter a search text and get a list and then if I press tab to skip to the next field in the form the component selects the first item in the list. Is there a way to avoid this and limit the selection to itemClick? Thx
Haluk,
To accomplish that you’d need to modify the source. You’d need to remove “event.keyCode == Keyboard.TAB” from the handleKeyDown function.
You might also be able to watch the event target and related item properties of the key down event. If the dropdown is visible and/or focus is not leaving the control, take whatever action you want.
hey–having a problem with displaying data from a database in the autocomplete object, getting [object Object] as a result. to hit it with a hammer, I changed the column name in my table to “label”, and set the labelfield=”{label}”
And just writing this I saw the problem, and fixed it:
labelfield=”label”
no need for {}
I think a lot of the issues in the comments are people’s own lack of experience with AS3 🙂