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 
Great component, thanks!!
In the autocomplete component, how can I show more autosuggest answers, currently the drop down box only shows 2 lines, how can I increase this to 5 lines?
I found it, nevermind :
dropDownRowCount=”5″
How can I programatically clear out the component?
I tried (component).flowBox.textInput.text = ”
thanks,
Steve,
This comment should help: http://hillelcoren.com/flex-autocomplete/documentation/#comment-1596
How do I install this thing? I think I did it wrong, because I’m getting the following error when I attempt to use the AutoComplete component:
“1120:Access of undefined property Consts” is being returned from three different places (line 597 of AutoComplete.mxml, and lines 52 & 82 of PromptTextInput.mxml).
Obviously there’s a reference missing from somewhere, which is why I assume I’ve installed it improperly — no one else is complaining about this bug.
So perhaps a little primer on how to install this component would be helpful for newbs like me. Thanks in advance!
Found the problem. I had dragged the sub-folders from the src folder into my project — but not the files that weren’t in sub-folders (Consts.as, for example).
I still believe that a simple “How To Install” primer would be helpful for future users, however. For example, I have no idea how to use this component in its .SWC form. Didn’t even know about the .SWC form ’till I read the other comments on this page. Thanks.
LMacNeill,
Happy to hear you were able to get it working.
Let me know if you run into any other issues.
Best,
Hillel
Really liking the component so far. One thing that I’ve not been able to figure out — in a normal TextInput, you have the restrict=”” property, where you can restrict input to certain keys (A-Z or 0-9, for example.) I know I can take the data and massage it later (using ToUpperCase(), for example) but my boss wants the display on the screen to be correct while the user is entering data. (In other words, he wants it to match all the other TextInputs on the form, where I used the restrict=”” property to force the proper input…)
So is there something in AutoComplete that is the equivalent of the restrict=”” property?
Thanks.
Oh — one other thing. It doesn’t seem to do TabIndex either. When I tab out of the AutoComplete field, it jumps to the last field on the form, not the next field in the TabIndex.
Any way to get TabIndex to work?
Thanks again.
I just switched to the new Flash Builder 4. I downloaded the Flex4 version of your component, and made the changes I made before (the ones needed for the restrict=”” functionality and the commas not causing multiple selections, etc…)
But the TabIndex changes are not working. I added the “override public function” stuff for the TabIndex in the AutoComplete.mxml file, but it still ignores its place in the TabIndices — when I tab through my fields it jumps over the AutoComplete component completely.
So how do I get Flex4 to recognize the TabIndex modification? It worked great in Flex3, but it’s just not working in Flex4.
Thanks.
Figured out the TabIndex problem. I had to set tabFocusEnabled=”true” when I declared my AutoComplete component. (e.g. )
With tabFocusEnabled set to true, now the “override public function set tabIndex()” function works properly — it acts like a normal textInput when you tab through the fields.
One more thing — I’m getting the following Warnings in Flash Builder 4: “The style ‘dropShadowVisible’ is only supported by type ‘mx.controls.List’ with the theme(s) ‘spark’.” and “Type ‘AutoComplete’ in CSS selector ‘AutoComplete’ must be qualified with a namespace.”
I’ve added a @namespace line in the defaults.css file, but that didn’t change anything. And I can’t find any reference to ‘dropShadowVisible’ in any file anywhere… So I’m totally at a loss here…
Thanks for your continued assistance.
Ok — figured out the namespace thing. Had to add ‘@namespace mx “com.hillelcoren.*”;’ to the top of the defaults.css file, and change the ‘AutoComplete’ line to ‘mx|AutoComplete’ Now I’m not getting that namespace warning anymore. But I’m still getting the dropShadowVisible warning… Still don’t know what to do about that.
And a third thing — if I’m trying to enter (for example) a company name like “XYZ, INC.”, as soon as I type the comma, the field blanks itself out.
I have allowMultipleSelection set to false (as I don’t want people to be able to enter more than one company name in the field). I also have allowNewValues and allowEditingNewValues set to true, as I do want users to be able to enter new company names that haven’t registered before. I’m assuming that when I type the comma, AutoComplete is assuming I’m trying to select more than one thing from the list, and it’s disallowing it.
Any way to get commas to work in the text you’re trying to enter?
Thanks (yet again! )
LMacNeill,
1. http://hillelcoren.com/flex-autocomplete/#comment-1065
2. http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-740
3. http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-940
Hope these comments answer your questions…
Best,
Hillel
I swear I searched before I posted… LOL I guess I just didn’t search for the proper terms… Thanks for linking those comments — I believe they’re exactly what I needed.
Yep — those comments solved the problem for me. AutoComplete is now working exactly as I need it to. Thanks again for such a wonderful component!
Hey,
awesome component!! I use it for an Email Client. My dataprovider objects look like
PersEmail: tom@abc.com
PersName: Tomas Boss
PersCompany: Nike
The dropDownLabelFunction displays me this (from your email example)
Tomas Boss (Nike)
Once an item was selected, i only want to display “tom@abc.com” int the searchField. Hence labelField=”PersEmail”
However it looks like, the search is then only performed on PersEmail. Typing “tom” underlines both the Name and the Email in the Dropdown. But as it turns out, the search is only performed on PersEmail, so if I would type “Tomas” nothing shows up.
Is there any way to define the search string? Maybe I am overlooking something..
Thx,
Martin
Martin,
Try setting a custom filterFunction, check out this comment http://hillelcoren.com/flex-autocomplete/#comment-1143
Best,
Hillel
Hi,
this is one of the most useful flex components available – thanks a lot for that.
I have found one problem with binding to the “text” property when changing the “selectedItem” programmatically (clicking the button). Manual selection works fine. Any idea why, workaround?
Thanks
h.
Try this..
autoComplete.selectedItem = some value;
autoComplete.validateNow();
autoComplete.dispatchEvent( new Event( Event.CHANGE ) );
I’m sorry, I realize it isn’t pretty. I’ll try to work in a fix into a future release.
Best,
Hillel
Perhaps you can tell me what’s wrong with this solution for that “text instead of a button” request. I wrote this function that I call on the change event:
// autoFill selection made – replace that button with text
public function autoFillSelectionText(acComponent:AutoComplete):void{
var returnString:String = acComponent.text;
acComponent.text = null;
acComponent.searchText = null;
acComponent.removeAll();
acComponent.searchText = returnString;
}
Just call that with your tag id as the parameter.
All I do is manually remove the button, then put the final text in the field instead.
It works for me. Is it really this simple, or am I just asking for more trouble down the road?
Alan,
I wouldn’t have thought of that solution, but if it works it works…
Hi,
First of all.., great work. I have the autocomplete control expanding as i enter the items (allowMultipleSelection = true). Can I make the size of control fixed so that it functions exactly as text input..,
Mohan,
Try this…
autoComplete.flowBox.maxHeight = some value
Thanks, But having setting the max height of flow box is fine.., But the other items are not visible.., is there any way to see the elements by having the max height., like a auto scroll bars like thing..,
Thanks,
Mohan
Mohan,
I’ve just tested this. It looks like setting the maxHeight on the autoComplete directly does show scrollbars when there are too many selected items to display.
autoComplete.maxHeight = 60;
Thanks Hilel,
Is it available on the current release? The scroll bars are not visible for meAnd as you said, it is good to have a clear method to clear the items of the control.
For the above code., scroll bars not appearing automatically.,
Thanks,
Mohan
Mohan,
It’s possible it’s part of the changes for the next release. You can get the latest code from the google code site.
Hi Hillel, your AutoComplete has been amazing for us!
I’m trying to add the inline button to the dropdown via AS and can’t get it to display.
My MXML:
Now, producing the same thing through AS, is coming up short for the inline button portion only…I get the values in there, and if you start typing, the dropdown shows and everything, but that button.
Any thoughts or direction advice?
Thank you!
Dan
Dan,
I’m sorry, wordpress striped out the MXML from your comment. Could you please repost using & lt;/gt; for the angle brackets (or email it to me if that’s easier).
Hi,
Great component, I am trying to use it so that if the user enters text that is not in the list the when the user leaves the component the textvalue is set to “”. I cant see a focusOutEvent, how should I go about implementing this? My code is as follows:
Also the download from the site is a .zip, I assume I change it to .swc to use as lib?
Thank you very much David
David
– Although he focusOut event doesn’t appear in the MXML it does work. It’s doesn’t appear as a chose b/c the AutoComplete extends the Grid class which has metadata which excludes the event.
– If you extract the zip file you’ll find the swc inside it.
Best,
Hillel
Detect ENTER keypress when dropdown is not visible?
Is there any way to detect when the ENTER key is pressed a second time after a successful or unsuccessful search?
The UX I’m trying to accomplish is this:
1. User sets focus to autocomplete control and enters some text that results in a match.
2. User presses ENTER key to select item.
3. User presses ENTER key a second time to move focus to next control.
I have code to move the focus but I’m not sure how to determine the difference between ENTER being used to select an item in the dropdown and ENTER being pressed when there is no search text.
I’ve tried listening to the KeyUP event but by the time that event is fired after selecting an item in the dropdown, the search text has been emptied and isDropdownVisible is reporting FALSE.
Put differently, how can I detect an ENTER keypress when there is no search text?
Thanks!
-Matt@Typidee
Matt,
Have you tried listening for the keyDown event?
Hi,
This is probally a noob question, but I cant seem to see a focus out event? I would like after the user has inputed some text for the component to select the correct item from the list on a focus out and if there is no match select the first item in the list. is this possible? I have the following code so far:
id=”auto”
dataProvider=”{ac}”
selectedItemStyleName=”none”
backspaceAction=”remove”
matchType=”anyPart”
allowNewValues=”false”
change=”handleChange(event)”
Kind regards,
David
David,
Although he focusOut event doesn’t appear in the MXML it does work. It’s doesn’t appear as a choice b/c the AutoComplete extends the Grid class which has metadata which excludes the event.
Hi,
This is probally a noob question, but I cant seem to see a focus out event? I would like after the user has inputed some text for the component to select the correct item from the list on a focus out and if there is no match select the first item in the list. is this possible? I have the following code so far:
Kind regards,
David
Hi Hillel,
Kudos on your component…Love it!
Having a funny problem though…Am using it to autocomplete a set of member names that I’m fetching over HTTPService from my server.
I get the suggestions correctly…However, I’m unable to scroll through the list using my keyboard…The first item always shows selected (highlighted in blue).
However, I’m able to use my mouse to select items…the suggested items also highlight when the cursor comes above them.
Thanks in advance,
Gaurav
Gaurav,
I’ve never heard of that one before….
If you’re able to create a sample application which demonstrates the issue I’d be happy to help you debug it.
Best,
Hillel
Hi Hillel,
Regarding my earlier post of not being able to scroll through the list using the up-down arrow keys…it was my mistake…I had not set the focus on the AutoComplete component…once I did that using setFocus(), things worked just fine.
Thanks.
Gaurav
Hi Hilel,
Thanks for this great component – saved me much time.
I made a couple of modifications which may come in handy.
I found that when “allowDuplicates” is set to false (don’t allowDuplicates), the duplicate check (AutoComplete::checkIfDuplicate function) was based only on the objects being the same. Therefore, if I were to create a new object with the same data, it would circumvent the check and data would duplicate.
What I’ve done is to include the “keyField” as part of the check. So if both objects have the same key value, they are they same and is a duplicate –
private function checkIfDuplicate( searchFor:Object ):Boolean
{
if (_allowDuplicates)
{
return false;
}
var count:int;
for each (var item:Object in _selectedItems)
{
if (item == searchFor || ( _keyField && item[_keyField] == searchFor[_keyField]) )
{
count++;
}
}
if (count > 1)
{
silentlyRemove( item );
return true;
}
return false;
}
Similarly, I modified the browser so that it would disable selected items based on key value. For this, however, I had to have changes to few of the classes. Happy to email you the lot if interested.
Thanks again!
zu
zu,
Thanks for the change, it’s a good idea. I’ll include it in the next release.
Best,
Hillel
Hi Hillel,
Another one regarding the use of validators for autocomplete.
Here’s the definition of my component (dataProvider points to an XMLList):
and this is the validator defintion
However, even though I select and enter a valid value in BranchName, I still get the red border around the autocomplete box saying “This Field Is Required”
Thanks in advance.
Regards,
Gaurav
Gaurav,
The blog strips out MXML from comments. Could you please repost using & lt;/gt; in place of curly brackets.
Thanks
<components:AutoComplete id=”branchName” labelField=”@name” selectedItemStyleName=”none” prompt=”Key branch name” searchChange=”handleSearchChange()” change=”assignID()” backspaceAction=”remove”/gt;
And the validator definition
<mx:Validator id=”val6″ source=”{ branchName }” property=”selectedItem” /gt;
Gaurav,
I’m not sure, that looks good. If you could put together a sample application which demonstrates your issue I’d be happy to take a look at it.
It seems that the SelectedItem behaviour has changed under Flex 4 as well. Before, if it didn’t find an item in the DataProvider, SelectedItem would come back as null. Now, it’s coming back as the search-text string. So, in the event that I want the item entered to be a new item, I cannot test the SelectedItem anymore — I used to say “if SelectedItem == null, then {do the new-item stuff} else {do the existing item stuff}” Now that doesn’t work, and I’m getting errors as a result. So why is SelectedItem behaving differently under Flex 4?
Thanks,
L.
LMacNeill,
First off, thanks for posting your solutions to your other issues. It’s really helpful. I haven’t switched yet myself to Flex 4 so haven’t had to deal with these issues yet (I’m sorry that you’re having to work through so many problems). For your latest issue, maybe you could check that selectedItems.length == 0.
Hope this helps,
Hillel
Oh I expected to have a few problems migrating from Flex 3 to Flex 4 — that’s why I’m doing it now, while the project is yet unfinished, and there is time to work on these issues.
The selectedItems == 0 idea won’t work — it’s returning at least 1, no matter what. (It *is* accurate, in that it returns 2 if there are 2 matches, etc. — it’s just not accurate if there are 0 matches in the dataProvider.)
I did figure out a way around the problem for my specific case, however. If it finds a match in the dataProvider, selectedItem is a ValueObject from the dataProvider. If it doesn’t find a match, selectedItem is the string it searched for. So I simply test to see if selectedItem is a String — if it is, then I know there’s no match, and I can deal with it. It’s working fine now, using this little hack. I use the following code:
if (String(myAutoComplete.selectedItem) == “[object Object]”) <
//do match-found-stuff
> else <
//do no-match-found stuff
>
So the only remaining problem I’m having is the “dropShadowVisible” warning that I posted a couple days ago. It’s just a warning — the program compiles and runs just fine, so it’s not an urgent matter. I’d like to figure it out at some point, of course, but I’m afraid I’ve reached the current limits of my Flex 4 knowledge. Perhaps in time I’ll figure it out, or you will. I will definitely post something if I do figure it out.
Thanks again for your work — it is greatly appreciated.
Thanks Hillel !
Your component is a real time saver.
Keep up the good work!
Karim,
Thanks, that’s nice to hear 😀
Best,
Hillel
Is there an actionScript command that can be used to manually close the menu?
Anthony,
There’s a hideDropDown function
Hillel,
Great component, but I have some trouble styling it. I would like it to look like a TextInput with borderStyle set to solid and cornerRadius set to 5 (or some other value).
The component does not seem to honor setting the border style. I tried setting the style on AutoComplete, PromptTextInput and FlowBox, but nothing helped so far.
Any suggestions?
Boy,
I’m sorry, I’ve tried to accomplish that myself but wasn’t able to get it to work.
Hillel,
Love the component. I’m wondering how would you go about adding the ability to show icons in both the drop down list and the text input after selection? Do you have an example of that? I tried looking at the source on your demo page and get an error saying basically the files are missing (Looking for something on MobileMe? is the exact message). Is there somewhere else to get the complete set of examples? Thanks in advance.
mmontana,
The source for the demos is in the ZIP file in the examples folder. Icons in the dropdown should be possible using a item renderer. For the icon in the text input, if you just want one icon you may be able to use the inline button feature. If you’re using multiple selection then you may be able to accomplish this using a skin class.
Hope this helps…
Hi Hillel,
This is a very useful component indeed! Thx a lot!
I use your component to make a mail app. I have a ‘to’ field and a ‘cc’ field. So I use the component twice. Is it possible to drag objects from one instance to another one?
Thank a lot again!
Dany
Dany,
That should be possible but I haven’t tried it myself and so can’t provide any specific help. Drag and drop support in Flex is very good though and can’t imagine it’d be too hard to implement. Let me know if you get stuck with any part of the implementation and I’ll try to help if I can.
Hi Hillel,
Thi tool is very useful for me.
My problem described below.
The XML structure is shown as below.
<mx:XML format="e4x" id="dataMain">
<items>
<item country="India" institute="PAC">
<CO>Raghupathi Reddy</CO>
<VPR>VPR</VPR>
<instdesc>Poa Amer Country</instdesc>
<type>Inst Type</type>
<RM>Relation M</RM>
</item>
<item country="India" institute="PAC II">
<CO>Raghupathi Reddy II</CO>
<VPR>VPR II</VPR>
<instdesc>Poa Amer Country II</instdesc>
<type>Inst Type II</type>
<RM>Relation M II</RM>
</item>
<item country="Pakistan" institute="APC">
<CO>McGee</CO>
<VPR>Chuck</VPR>
<instdesc>Jr. data analyst</instdesc>
<type>Inst Type Pakistan</type>
<RM>Relation M Pak</RM>
</item>
<item country="United States" institute="APC">
<CO>McGee United</CO>
<VPR>Chuck United</VPR>
<instdesc>Jr. data analyst United</instdesc>
<type>Inst Type Pakistan United</type>
<RM>Relation M Pak United</RM>
</item>
</items>
</mx:XML>
XMLListCOllection defined as below.
Here i am getting the duplicate entries in the dropdown for india as there are 2 elements for india.
How to avoid this. Its little urgent.
Thanks in advance.
Raghupathi,
You should be able to set a custom filter function which prevents one of the india records from ever being matched.
Hi,
How to have a default value in the Autocomplete. For example my data provider has {‘one’, ‘two’, ‘three’}, The autocomplete should show two as default. I tried by setting the text property, but it is not working.
Thanks,
Mohan
Mohan,
Try setting the selectedItem property to “two”
it si posible to use the swc in a AS3 pure file adding it as a child to a movieclip ??? i imported to actionscript but it shows nothing
Michael,
I wouldn’t think that would be possible as the component is heavily dependent on the Flex framework. You may be able to create a small Flex SWF which you use in your AS3 project but I can’t imagine that would be too efficient.
Hi Hillel,
This really is a very useful component. Thanks man.
I am facing a little problem here. I am using allowNewValues=”true” to allow my users to enter their own values as well. But it is not working for me. Can you plz tell what can be the reason.
narmi,
Tough to say… if you could create a very simple test application which demonstrates your issue I’d be happy to take a look at it.
hi hillel
this is realy a wonderful component.what is my need is i want to show all the values in dataprovider while i am double clicking on the component is it possible to do like that….means if i enter a search text it will show the result based on the text.if i double click on the component i want to see all values in dropdown
usm,
To do that you’re going to need to set a custom filterFunction when the user double clicks which always returns true (so it ignores the search text). Make sure you remove this filterFunction though when the drop down is hidden.
Hope this helps…
Hi usm and Hillel,
I did exactly that and it’s easy:
Set the following props on the component:
Dany
Thanks a lot for ur reply
Oops, missed the code:
doubleClickEnabled = “true”
doubleClick = “event.currentTarget.showDropDown()”
hi hillel and dany
Thanks a lot for ur reply.
Hello hillel,
I want to display a list of items, into the AutoComplete
but it did not work .
I used the code below
var arr:ArrayCollection= new ArrayCollection([“aa”, “bb”, “cc”]);
var list:AutoComplete = new AutoComplete();
list.allowNewValues=true;
list.selectedItems= arr;
editValue.addChild(list);
thx for your help
Hello sorry, i forgot to add “dataProvider”, it works fine now 😉
Hello Hillel, thank you for publishing a great component. When we rolled over to Flex 4, we started seeing some strange behavior – some buttons were turning blue after using the AdvancedAutoComplete.
Sample application below, steps to reproduce.
Click “To:”
choose “one”
click “Select”
The “To:” button goes blue.
Thanks in advance.
– Jeffrey
Jeffrey,
It looks like your sample app didn’t come through (wordpress has issues with angle brackets). If you could please either repost using & lt;/& gt; or send it to me in an email that’d be great.
Thanks,
Hillel
Hi Hillel,
Terrific component. In your demo, using STYLE_FACEBOOK, there’s a small remove icon attached to each search term. While I do see the file remove.png, it’s not part of the CSS style or FacebookSkin; how does it show up?
Thanks, Garry
Garry,
There is a property on the AutoComplete component called showRemoveButton which controls whether or not it’s visible.
Best,
Hillel
Hi nice component but i want a clarification.
I am using httpservice and websiervice can u help me how to pull up the values from these service and show in auto complete.Thanx in advance
Regards
Actualy we are using for map i want all the details in the drop down of the auto complete i have service for road name, city, landmark if they type in the auto complete i need all the things in the drop down.
This my second question please do help me out
Mark,
There’s an example of how to use the AutoComplete with a server-side data source in the examples folder of the zip file. The file is called DynamicData.mxml.
Let me know if you need more help,
Hillel
Hi Thanks for the replay, since i am using http service and using result format as object i am not able to load the data in auto complete can you please help me out.
Mark,
I imagine you’re getting back an array of objects, you’re going to want to create an array collection to use as the data provider.
Something like…
var data:ArrayCollection = new ArrayCollection( result as Array );
autoComplete.dataProvider = data;
Hi, you did an incredible job with this!
I just have a one question:
Is there any way to dispatch an event on clicking the selected item (the header) when is focused?
Thank you
SandraS,
If I’m understanding your question correctly, you could add a click handler and then check if the target property of the event is a SelectedItem.
Hi,
My Third Question
Is it possible to show both the color and hex in autocomplete datagrid.
for example
if i searching almond menas
in the drop down it shd show both almond and the hex
please let me know how to do this since i am not able to call two argument in the label field..
Mark,
You have two options: using either a labelFunction or a custom item renderer. Here’s a comment which provides an example of how to use the labelFuncton http://hillelcoren.com/flex-autocomplete/#comment-1143. The color chooser demo provides a good example of using a custom item renderer.
Thank you Hillel..
Can you give me an example of custom Item renderer.
Mark,
The color chooser demo provides a good example of using an ItemRenderer. The source code is in the examples folder in the zip file.
Hi,
What’s the best way to implement multiple selection in the drop-down search list? The default behavior is to dismiss the list when the user makes a single selection; I’d like to select multiple items.
Thanks.
Great component. I’ve been able to dynamically search through my database and return values of Ticker, name, and stock price. Currently, I input GOOG and the dropdown list displays the ticker and name “GOOG – Google”. So far, so good. The user selects that item and then I want to be able to display the stock price in another field. How do I do that? I can repeat “GOOG – Google” but can’t seem to repeat the value unless it is displayed in the drop down list
Kristen,
Could you please try explaining your question another way… I’m not sure what you mean when you say “display the stock price in another field”.
Thanks
Mark,
I imagine you’re getting back an array of objects, you’re going to want to create an array collection to use as the data provider.
Something like…
var data:ArrayCollection = new ArrayCollection( result as Array );
autoComplete.dataProvider = data;
Exactly the same thing i am doing collecting the value as arraycollection and giving the dataprovider to the auto complete. but i am not able to load the data. please help me out..
Regards
Bump:
What’s the best way to implement multiple selection in the drop-down search list? The default behavior is to dismiss the list when the user makes a single selection; I’d like to select multiple items.
Thanks.
Garry,
You’re definitely going to need to make modifications to the source code to get that working. I’d start by commenting out the call to hideDropDown in the handleSelectedItemsChange function in AutoComplete.mxml. I imagine other issues will pop up though.
hi Hillel,
Thank you ur component rocks..I fixed using the label function. Now i need to style the component. Can you tell me we can change the alternate color for the drop down and i want the style to be none if i put none it shows mac style when it is selected.
Mark,
To set alternating rows colors you’re going to need to use the source for the component and modify the dropdown (here’s an example http://blog.flexexamples.com/2007/08/17/alternating-row-colors-in-a-flex-list-control/). To change the style make sure you’re setting the selectedItemStyleName property.
Thank you it worked like a charm
Hi Hillel,
Since we are using map i need to filter few words like street, road,Block, and lane if they type the drop down shd not come so can you please let me know how to do this in this component is it possible means can you please help me out. Please let me know how to do this.
One more thing i need the drop down to come only after i type four letters after that the drop down shd come
so please let me know how to do the above said..
Regards
Mark,
This can all be done using the filterFunction. Don’t match if it has a word you don’t want to match and return false of the length of the search string is less than 4.
Hi can you provide an example for the fileterFunction please
Mark,
http://hillelcoren.com/flex-autocomplete/#comment-1143
I’m with problem to bind the selectedItem.
When an user selects an object using the autocomplete the binding works and fill the label.
But if I fill the autocomplete: autocomplete.selectedItem = object;
The autocomplete fills well, although this value isn’t throwed to the label.
I saw in the source code that a change event is dispatched when the user selects an item using the ENTER key.I tried to dispatch this event after select the item manually.However, the binding doesn’t work too.
Rafael,
That sounds like a bug…. I’ll fix it in the next version. For now, try dispatching the change event at the end of the handleSelectedItemsChange function.
Thanks. It works well!
There’s a problem dispatching the change there because when needs to listen the change event it’ll be dispatched twice.
hi, this is an amazing component and i configured and tested. i fell in love with the performance. i currently need a similar feature with autocomplete and multiselect for a j2ee web application. do you have a javascript solution for this?
Sai,
I’m sorry I don’t. There are a number of javascript solutions out there though…
thanks hillel, but the javascript solutions i tried.. seem to have a problem when it comes to peformance..
Sai,
Sorry to hear that, I haven’t created one myself.
I fixed it, dipatching a different event where the change was dispatched previously.So, I can get the same effect.
Then, in the component I listen the event itemSelected instead the change.
You can see in the link below the fix:
http://www.cauirs.com.br/projetos/AutoComplete.rar
Is it possible to alter the style of the text coming in based on what the text is.
Example: if the text says “Active” then the color of the text is green. If the text says “InActive” then the color is red.
Thanks!
Adam,
You may be able to implement by creating your own skin. Otherwise, you’re going to want to use the source code and make modifications to the SelectedItem class.
@Adam,
Look thru Hillel’s examples in the package for renderers:
Assuming you made use of the dropDownItemRenderer attribute, and created a mxml file to render the individual results based on HBox…
Assuming your HBox contained a Label called “srchLabel”
THEN you could add something like this to the end of your “set data” function:
srchLabel.setStyle(“color”, “0x006600” );
if (value.[DATA FIELD YOUR TESTING] == ‘InActive’){
srchLabel.setStyle(“color”, “0x660000” );
}
Hi,
your component is really useful!
Now I’m trying to personalize the text input style.
So I use selectedItemStyleName=”none” but when I’m searching a word and I select a suggestion from list, the world in input field appear white (in white background it’s like a ghost).
If I rollover/click the word, it becomes black.
As you say I try to add an hack style after creation event but nothing change…
autoComplete.textInput.setStyle(“color”, 0xff0000);
I try with “themeColor”, “selected”, “textSelectedColor”, “textColor” too…
Which is the style string to personalize the text color in various states in the input textfield?
Thankyou very much,
D.
D,
Do you have any other styles in your project which may be setting the text to white? I’d try to create a simple test application to see if the problem still exists.