Note: The interface for the component has been changed a fair bit in this version. If you’re upgrading, please refer to this post to determine the changes you’ll need to make.
I’ve found that I very often need to use the component as a basic autocomplete combobox, without all the extra jazz. To simplify things, I’ve split the component into two classes: AutoComplete and AdvancedAutoComplete.
I’ve moved a lot of the extra features (such as browsing and ordering) to the AdvancedAutoComplete component. The demo and documentation provide breakdowns of which features are where.
The catch with this approach is if you need one of the features from the advanced component you have to take them all. It looks like Gumbo will implement changes to the component framework which will enable implementing a better solution. I’m planning to rework the component once it’s officially released.
Additionally, I’ve changed the names of a number of properties to better follow the conventions used throughout the Flex framework.
| Old Name | New Name |
|---|---|
| isMultiSelect | allowMultipleSelection |
| multiSelectLayout | selectionLayout |
| isStrict | allowNewValues (note: logic is reversed) |
| areNewItemsEditable | allowEditingNewValues |
| isBrowseable | showBrowseButton |
| isOrderable | showOrderButtons |
| styleName | selectedItemStyleName (note: now a style) |
Here’s what’s new…
- Created inlineButton feature: You can now set a button to appear at the end of the combobox.
- Added Actions Menu: I’ve used the new inlineButton feature to implement an actions menu in the AdvancedAutoComplete component. The feature is enabled by setting a value for the actionsMenuDataProvider property. I’ve added the option to the advanced tab in the demo.
- Support for skins: The selected items have been changed to buttons which has enabled me to rework the MacMail and Facebook styles as skins. I’ve created a CustomSkin example application which demonstrates how to create your own skin. If you end up creating any nice skins please send them my way. One note here, if you’re using the source you’ll need to include the defaults.css file in your app.
- Added autoSelectEnabled property: One of the most common questions posted is how to prevent the component from automatically selecting a match. You used to have to create a function which always returned false for the isEqualFunction property. You can now simply set autoSelectEnabled to false. If you’d like to implement a custom function you can set it in the autoSelectFunction property.
- Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any bugs which people have spotted.
Lastly, I wanted to thank Demetri for convincing me to create it, creating the icons and guiding the UI decisions along the way and Tarak for allowing me to share it (and introducing me to Flex). Thanks guys!
Hillel Coren 
Continuation of my previous post:
What would be nice:
1) The component handles the delay for autocomplete (execute step 2 below after N ms)
2) The possibility to mount the item’s array through a function (AutoComplete.ObtainArrayFunction = something), so we can choose from where we get our items
A fixed array is nice, but, in some cases, it is impossible… sometimes we have so many items in a database… =\
JCK,
The next version of the AutoComplete has support for using XMLListCollection as the dataProvider. You can check out the latest SWC from the google code site. Please give this a try and see if it helps with your issue.
For point 1, why not introduce your own delay. You can check out the DynamicData.mxml file in the examples folder to see an example.
Let me know how it goes…
How do I change the heigth of AdvancedAutoComplete? the heigth is locked want the component to 150, heigth .. I have to extend it?
Thanks…
Luan,
You should be able to set the minHeight property.
Let me know if you have any issues.
Thank you for helping me.
How do I reduce the heigth only of the MultiSelect component?
i need reduce the heigth of the List and the button Remove.
Thanks!
Hillel,
Thank you very much for your answer. I have another question, Can I always image of actionsMenuDataProvider all the time?
Praem,
I also prefer that the icon is always visible, I’ve changed it in the next release. You can download the latest SWC from the google code site.
Hi Hillel,
I am facing a urgent problem regarding this component.The problem is like that if the input search criteria does not match with the arraycollection the input text will be removed automatically from the input text box.Please help me with some hints so that I can solve this problem ASAP.
Regards
Asfahan
Asfahan,
I’m sorry, I’m not following your issue. Could you please try describing it another way.
Thanks
Hi Hillel,
Thanks for the reply.Actually I am facing the same problem what tahir suggested on May 24.What I actually want to remove the text if it doesn’t exist in dataProvider and it must be happend either in focus out event or key press event.
For an example My data provider contain two records “Cat”,”Animal”.Now as soon as user type any other character except “t” after “ca” the text automatically removed from the input text.It means if user type “cad” the records will be removed from the input text.
Hope I am able to explain you.
Could you please guide me to resolve this issue.
Regards,
Asfahan.
Asfahan,
Thanks, I follow you now. It looks like Tahir posted a solution to the problem, is his change not working for you?
Hi Hillel,
Thanks for the reply.Actually I already go through the solution suggested by tahir.But I want the same things in some diffrent way for an example if user type “d” after “ca” and my data provider does not contain “cad” value and if user did not press “Tab” or “Enter” key event & he just focus out from the text box.Means user click outside “autocomplete” component.Now as my data provider does not contain “cad” value.So this value must be removed from the search text box.
Is there any event or function available in this component to solve this issue.Please give some hint or tell me the function name where I have to modify the code to solve this problem.
Regards,
Asfahan
Asfahan,
Although the focusOut event doesn’t appear in the MXML you can use it in ActionScript. ie,
autoComplete.addEventListener( FocusEvent.FOCUS_OUT, handleFocusOut );
Actually, you can also use it in MXML. Flex Builder’s text prompting feature will not suggest it, but if you write it anyway, it works.
Hi Hillel,
Recently my team member asked me to modify this component with multiple column search facility.
For example: if my data provider contain three fields like name, code and email id.
As data provider can contain >100000 records so user can search the records in format of name+code or code+name or name+email.
it means If the data contain like below format:
Name code email
abdul ab ab@cp.com
Nancy nan na@mn.com
So user can search the records “abdul+ab” or
“ab+ab@cp” like that.
Do you have any idea whether is it possible to implement this feature on this component?Either in dropdown or in browse option.If it is not possible could you please tell me why it is not possible so that I can explain this.If you don’t have any idea could you please send some link so that I can start to implement this.
Regards,
Manna
Manna,
That should be pretty straightforward to implement, you’d just need to set a custom filter function which checks against all of the fields. I actually wrote a post a little while back which discusses this topic (and a way to improve the performance).
http://hillelcoren.com/2009/04/17/faster-searching-in-flex-part-2/
Hi Hillel,
Is it possible display the remove icon before the selected item or before the , seperator.It means if u select a record the result will be displayed like
Ex:”remove Icon” abc,
or abc “remove icon”, like that
Let me know whether u understand my point or not.
Regards,
Sourav
Sourav,
You can accomplish this by using the source code and changing the setting for labelPlacement in the IconButton.mxml to right.
Hi Hillel,
Presently what its happen after selecting multiple records the selected records are become greyed out.Now my question is is it possible after single click on greyed out item ,its allow user to remove the selction of the entry and the “grey out” effect is then no longer applied.
For an example:You select the records “Asfahan”.Now from the browse option if you click “Asfahan” again then “Asfahan” records will be remove from the selection and “Greyed out” no longer applied.
As my team member asked me to enhance this component like the above.Could you please give us some hints so that we can modify the component to achieve the above functionality.
Anticipating to get your feedback soon.
Regards,
Asfahan
Asfahan,
I’m sorry, I’m not following what you’re trying to accomplish. Could you please try describing it another way.
Hi Hillel,
I have one simple question.It would be great if u answer that one.The question is :Suppose my data provider contain three fields id,name,sal.
In the dropdown it displays only two field name & sal.
Now user select 2 name records.
Now my question is after selection how can I retrieve the id of each name.Because name & sal can be duplicate.
Ex: id name sal
1 abc $100
2 abc $200
3 def $500
Now user select abc & def.Now after selection I want to retrieve this id.Could you please help on this.
Regards,
Manna
I resolved bind problem:
override public function set selectedItem( value:Object ):void {
super._selectedItems.addItem( value );
dispatchEvent( new Event( Event.CHANGE ) );
}
Mauro,
Thanks for letting me know you were able to resolve the issue.
Let me know if you run into any other problems.
Hi Hillel,
I got my answer I think we can get the id information using autocomplete.selectedItems object.
Regards,
Manna
Manna,
Awesome, happy to hear you were able to figure it out.
Hi Hillel,
thank you for the great AdvacedAutoComplete.
unfortunately i habe a few issues:
First, all the labels are fixed in english. I edit the component for my self for german text an prompts.
Second, can you please rebuid the sources. I’ve some problems to activate the actionsMenu.
Third, there are strange tooltips in all styles. So i get the htmlText-Tooltip for an entry in the listBox. Can yu give me some hints, how to deactivate these. The tolltips come up sproradic while the first typing in some text in the searchBox.
Thanks
Frank
Frank,
1. There should be properties for all the labels (ie, browseLabel, removeLabel, etc). Let me know if there are any missing.
2. Can you please explain the issue your having. I haven’t heard other complaints so I don’t think it’s likely that rebuilding the SWC will solve your problem.
3. I’m not sure about this one, I don’t see any tooltips. Are these visible in the demo?
Hi Hillel,
1. i miss the properties in the ListBuilder (OK, Cancel, the prompts in the left and right inputfield and the tooltips for the imageButtons.
Also in the Browser the select and ok and the PanelTitle “Browse”. Yes some customers are requesting for 🙂
2. i trying to implement the same menu as in your demo. But i don’t understand how my object must be formatted and which events you are yousing for these two options.
3. Unfortuantely not. I have an little example with fix names. And if into the searchfield verry quickly and type a name, i can see a tooltip like this: First Name. its sporadical but reproduceable.
Thank you for your quick reply!
Frank,
1. Hmmm… yeah we’re missing a bunch (I’m surprised nobody noticed this sooner). I don’t love the idea of adding properties for all of these fields. I’ll consider working in resource bundles (or some other solution) in to the next release. For now I’d suggest using the source and manually making the changes.
2. The AdvancedDemo.mxml file should be pretty self explanatory. We’re using a regular Flex Menu component so you can check here for more info on how to format the XML data. http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000571.html
3. Would it be possible for you to send me an example application which demonstrates your problem.
If anyone is still looking for the solution to the tooltip problem (problem: when you type quickly with your mouse over a selection in the drop down sometimes a tool tip would pop up, which is useless to the user and there would be html bold and underline tags since tool tip doesn’t support html, and the tool tip would sometimes just hang there if the drop down selections change –ie the mouseOff event wouldn’t fire), all you need to do is disable tool tips with the flex tool tip manager class in AutoComplete.mxml. Just add this line to the init() function:
ToolTipManager.enabled = false;
Be sure to include the tool tip class above in the import section:
import mx.managers.ToolTipManager;
Thanks Hillel, awesome component!
Rick,
Thanks for the tip, I’ve actually run into that issue myself. I believe this disables all tool tips in the app (otherwise I’d add this to the next version of the component).
Hi Hillel,
Thanks for the reply.For my question please follow the below example:
For example:
My data provider contains two fields name & code.
name code
Brien BR
Hillel HC
Ronaldo RC
Now from the dropdown option you select the records “Brien”.So now you click the browse option from the action menu.
You will see the information belongs to “Brien” is “Greyed out” means its showing in different color and you can not reselect this records as it was already selected.
Now what I want if you click “Brien” records again from the browse option it will remove the records from the selected items list and the information belongs to “Brien” will be displayed in normal color.
Hope I am able to explain you.If you need more explanation please let me know.
Any help will be appriciated.
Regards,
Asfahan
Asfahan,
Thanks for the explanation. I now understand what you want to accomplish (but I have to admit, I don’t personally think it will be clear to your users). Your best bet is probably to set allowDuplicates to true and then watch for the case where an item is selected a second time.
Let me know if you have any trouble getting this working
Hi Hillel,
I want to add little more information which will be helpful for enhance this component.I think this
is a good feature.
For example:
I have selected 50 records from my dataprovider(Means autocomplete.selectedItems contain 50 records).
Now I want to remove one records.So it is very difficult to traverse each records in the flowbox.
So what I did I provide an option “Display Selected Records” in the Action menu.
I have implemented this using autocomplete.showBrowser() option where dataprovider= autocomplete.selectedItems;
So now user can see the the selected records from the “Display Selected Records” option.
Now I want one more additional feature so that user can remove a selected records from
“Display Selected Records” pop up.
For this the bussiness rule is like that when user click the “greyed out” entry(presently displaying in disable color) then the “greyed out” entry become “normal color” from “disabled color” and the records will remove from the autocomplete.selecteditems list.
Could you please give some idea to achieve this functionality.
Regards
Asfahan
Asfahan,
A simpler solution may be to use the list builder (set the useListBuilder property to true). If you want to go with your current approach I think it’d be easier to create your own browser which use the selectedItems arrayCollection as the dataProvider. You could then simply remove whichever items the user selects.
Hi Hillel,
Today I face a strange problem.Please help me regarding this.The problem is like below:
Presently I am displaying “Avaiable for single record selection” as prompt on input textbox.After
click on this texbox I am able to view the “Action menu” icon & it works fine.
But if I am displaying a small text as prompt for example “Avaiable for single select” on input text box.Then after click on this input text box I am not able to view the “Action menu” icon.
But if I fire a keyboard event on input text box(i.e if type something on the input text box)
then I am able to view the “Action Menu”.
Could you please tell us how to solve this strange issue.
Regards,
Sourav
Sourav,
That’s definitely an interesting one, I’ve never seen that before. If you can create a simple test application which demonstrates the problem I’d be happy to help you debug it.
Hillel,
Thanks so much for your time in this project. It’s weird, because I’m having problem that I thought would be more prevalent because it’s so simple. I am using the AutoComplete component and passing it a
When I type in ANYTHING that’s NOT part of the name of one of my objects, I get an exception:
ReferenceError: Error #1069: Property data not found on com.myComp.xxx.CustomObj and there is no default value.
at mx.controls::ComboBase/get value()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBase.as:880]
at mx.controls::ComboBase/setSelectedItem()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBase.as:717]
at mx.controls::ComboBase/set selectedItem()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBase.as:706]
at mx.controls::ComboBox/set selectedItem()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBox.as:846]
at mx.controls::ComboBase/updateDisplayList()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBase.as:1211]
at mx.controls::ComboBox/updateDisplayList()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBox.as:1212]
at mx.core::UIComponent/validateDisplayList()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6351]
at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]
So, all I do is set my dataprovider to a list of objects, that all have a “name” that all start with a letter. When I type in a “3”, I see that exception. I want to allow the user to enter numbers, even if it’s not in the dataprovider. I’ll handle them differently. Any ideas?
David,
Are you sure you’re using my AutoComplete (there are a number of ones out there for Flex). I ask b/c the error being thrown is from the ComboBase class which most other AutoCompletes are based on while mine isn’t.
Peculiar! here’s my code:
(The only include in this mxml file)
xmlns:autoText=”com.hillelcoren.components.*”
David,
We’ll… that’s definitely me 😉
If you can you put together a simple test application which demonstrates your problem I’d be happy to help you debug it.
I’m having a hard time isolating the problem. Your examples work when I’m directly copying them into my code, but mine still doesn’t work. It has something to do with the fact that I’m passing in an external array-collection (i.e. the datasource is passed in from another class). I don’t declare the array at the top of my MXML file like you do in your examples. Based on the error, I’ve added the variable of name “data” to my class and just set it to the empty string. Seems like a non-optimal solution though. Any thoughts?
David,
I’m sorry, I don’t have too much to go on. I’d suggest trying to prove that it’s the passed in dataSource which is causing the problem. You could try changing your app so it uses an arrayCollection defined in the class and see if it resolves your problem.
Hillel,
I have one hindrance while integrating the Autocomplete component. I do not want to use comma as the item/element delimiter, want it to be as part of the search string.Cases like “65 main st,irvine,ca”. Can the source be modified to handle this or simply not worthy? Directions/Thoughts on this is appreciated?
Vinoth,
The modifications to the source to make it work the way you’d like aren’t too bad. You’ll need to make the following two changes in the AutoComplete.mxml file.
1. In the handleKeyDown function change:
else if (event.keyCode == Keyboard.ENTER || event.keyCode == Keyboard.TAB || event.charCode == 44)
to
else if (event.keyCode == Keyboard.ENTER || event.keyCode == Keyboard.TAB)
This will prevent the component from using the comma key as an item selector.
2. In the handleChange function change:
var parts:Array = searchText.split( “,” );
to
var parts:Array = searchText.split( “###” );
This will disable the code which splits up the string into it’s parts (assuming none of your values contain the string ‘###’).
That should do it, let me know if you run into any other issues,
Hillel
Hillel,
Many Thanks. It works omitting the comma.
Vinoth
Hi Hillel,
I just wanted to thank you for all your hard work and allowing everyone to benefit from it. Your code is really quite nicely done. Congrats.
I used several other auto-completion type components and have found yours to be the most robust and well thought out.
Mike,
Thanks, that’s really nice of you to say.
Hillel,
I do not want the button which inserts itself in the text box after selecting a dropdown element;
How can we have text instead of the button after a selection is made; Just needs to look like a simple TextBox with the text selected.
Vinoth,
Thanks for letting me know the comma fix worked.
You can set the selectedItemStyleName property to “none” or “underline”.
Hillel,
I am using the Email Demo to check my modifications and Button is still visible instead of the text inspite of setting selectedItemStyleName=”none”
Vinoth,
I’m sorry, I’m not sure what’s going on here. I just tried modifying the Email Demo (I changed the style from macMail to none) and it worked fine for me. Can you try doing a “clean build” and checking out the latest version from the google code site.
Hillel,
The selectedItemStyleName=”none” still does not work ; also tried it in another m/c. The source which I use is from Googlecode and I have made some changes to the source but i dont think it is related to the selectedItemStyleName.
Below is what how I use:
Vinoth,
It looks like wordpress stripped out the code from your last comment. Could you please either email it to me, or replace the less thans/greater thans with ampersand lt;/ampersand gt;
Thanks,
Hillel
Hi Hillel,
I need some urgent input regarding this component.
Suppose using this component I have selected 3 records & stored into the database.Now I want to display this 3 records in to this component
after fetching the data from database.
Could you please tell me how to implement this?
[Note: I tried to assigned the data using
autocomplete.selectedItems={items retrived from the database}
using debug I checked & found that the data is coming on {items retrived from the database}
but is not diplaying on the textbox. ]
Please help.
Regards,
Sourav
Sourav,
I’m not sure what the issue is, setting the selectedItems property is correct. If you could create a test application which demonstrates the problem (ie, use dummy data instead of the result from the database) I’d be happy to help you debug it.
Hello,
First, thanks for making this great component, and especially thanks for being so responsive and helpful. I was hoping you could give me a tip. I am currently using it to filter an ArrayCollection that is populating a DataGrid. That is working fine, but I also wanted to use it as an ItemRenderer in one of the cells of the DataGrid.
The data in this instance is Accounts and Shippers, where there is one Account to many Shippers. So in the Shippers DataGrid, I wanted to use your fine component as an ItemEditor. I have the value object for the Shippers, which includes two properties, account_id and account_name. The AutoComplete MXML component that I’m using as the ItemEditor is already pulling in its DataProvider of accounts, so what do you think the best way to pass the account_id and account_name in to the AutoComplete in order to set it as the SelectedItem?
Thanks for your help
Philip,
To set the selectedItem you’re going to want to set the dataField property in the DataGridColumn. I’d suggest taking a look at the DataGridDemo.mxml file in the examples folder. Let me know if you need more help getting this working.
Ok, thanks for the tip. So if I understand correctly, I would add an Object to the ArrayCollection with the label and the data I want for the AutoComplete along with another property of the ArrayCollection that contains the data I want displayed when the field is not being edited. Then, I would
1. set the DataGrid editorDataField to the Object in the ArrayCollection
2. set the DataGrid dataField to the data property of the ArrayCollection (e.g. account_id)
3. set the AutoComplete labelField and keyField to the properties of the Object in the ArrayCollection.
Does that sound like I’m on the right track?
Philip,
You’re going to want to set the editorDataField to “selectedItems” (at that’s the property of the AutoComplete which will contain the value once the user finishes editing the cell). The keyField is only needed if you’ll be matching based on the key. In the DataGridDemo I didn’t need to use it as the Object being passed to it is the exact same object. If however, I’d passed it an object which was equivalent (but not the same) then I would have to use it (hope that makes sense).
Hi Hillel,
I want to add little bit more info to my previous mail.
I tried to bind the data which fetched from the database to this autocomplete component
using the following way:
Step1:
[Bindable]
private var SavedObj:ArrayCollection
=new ArrayCollection
([
{ “name”:”Andy”,”age”:”2″ },
{ “name”:”Pal”, “age”:”2″ }]); //This info will come from the database
Step2:
Pass that data into the component
//This component I have created using your component
//BindValue indicate which info I have to display into
//the textinput
//Here I did n’t assigned the dataprovider.The dataprovider will be assigned on AdvancedDemo.mxml file when user start typing
//or when user click the browse option.
Step 3:
//now to bind the data on textinput I have written the code on AdvancedDemo.mxml file like below
[Bindable]
private var _bindValue :ArrayCollection;
private var _fieldWatcher : ChangeWatcher;
[Bindable]
public function get bindValue() : ArrayCollection {
return _bindValue;
}
public function set bindValue(value :ArrayCollection) : void {
_bindValue = value;
if (_bindValue != null)
{
_bindValue=value;
}
_fieldWatcher = null;
setBinding();
}
private function setBinding():void{
if (_fieldWatcher == null && _bindValue != null )
_fieldWatcher = BindingUtils.bindProperty(autocomplete, “selectedItems”,_bindValue,null);
}
But this does not work.
I also tried using the below way:
public function set bindValue(value :ArrayCollection) : void {
_bindValue = value;
if (_bindValue != null)
{
_bindValue=value;
autocomplete.selectedItems=_bindValue;
}
}
This also not works.
Could you please tell me where I was wrong or please tell me the wright way to imlement this feature.
Please help.
Regards,
Sourav
Sourav,
As per my last comment, is it possible for you to put together a test application which demonstrates your problem?
Hallo!
Problem with flex 4 style?
I am using your component in flex 4 project (formerly in flex 3 did not find any serious problem) and the rollover styles (both of combo and browser-datagrid) is not visible (the selected item can not be seen although the selection are being occured and the item.selectedValue is correct) I have tried to play with different style .. but any success
Any idee?
Thanks
Laszlo,
I’ve heard reports from other people that there are issues with the component in Flex 4. I’m currently working on releasing a 1.0 version of the component which I believe works reliably on Flex 3. After that my plan is to start working on supporting Flex 4 (and improving the documentation). I’m sorry, but I think it may be a little while (a month or two) until the component works reliably in Flex 4. Truth is, I’m surprised so many people are already using Flex 4 to build production applications.
Thanks, I am waiting for the new version!
Hi,
I just tried to implement this lib into my project and I have an issue where I cannot change the “selectedIndex”. I presume this lib extends ComboBox? Is there anyway I can change the SelectedIndex of the component?
Jeffery,
Although it’s similar in certain ways to the ComboBox component, it doesn’t extend it. One of the main features which differentiates this AutoComplete from the rest out there is that it supports multiple selection (which would have been very difficult if I had extended the ComboBox). To select an item you need to use either the selectedItem, selectedItems or selectedItemsIds properties. I’ve never had a need to use the selectedIndex, but I’ll definitely consider adding it in the future.
Let me know if using the selectedItem/selectedItems/selectedItemIds doesn’t work for the way you’re using it
PLEASE…
I need to pass values from a Textinput to the AutoComplete by clicking a button. The problem is: when I’m passing the values, the component is not applying any style. How can I pass values to the component to preserve the component’s style?
Thanx!
Erik,
You have two options:
If you know that the text entered is in the dataProvider (or you’re allowing new values to be entered) you can use
autoComplete.selectedItem = textInput.text;
Otherwise, you can use the following code
autoComplete.text = textInput.text;
autoComplete.search();
The second approach will cause the dropDown to be displayed (if the text isn’t a perfect match). If you want it to automatically select it if there’s only one match you could set a custom value for the autoSelectFunction property.
Hope this helps,
Hillel
Hi Hillel,
I got some issue when I am retrieving multiple records
from database & displaying them to autocomplete component.
It would be great if you can help on this.
/*I have created a custom component ModifiedAutcomplet) using your component with addition of below code*/
[Bindable]
public function get bindValue() : Object {
return _bindValue;
}
/*This properties is used for bind the records with autcomplete component which are saved in database*/
public function set bindValue(value : Object) : void
{
//Intially data come with null value
_bindValue = value ;
_fieldWatcher = null;
setInternalBinding();
}
private function setInternalBinding():void
{
if (_fieldWatcher == null && _bindValue != null)
{
_fieldWatcher = BindingUtils.bindProperty(this, “Selected”,_bindValue,”Name”);//My object contain “Name” field only
}
}
public function set Selected(value:Object):void
{
if(value!=null)
{
var obj:Object=_bindValue;
/*again I am reasign this _bindValue because it contain my records with “Name” field*/
autocomplete.selectedItem=obj;
}
}
I am calling the component like below way
//NameList will be loaded asynchronously
< cmk:ModifiedAutcomplete id=”id1″ width=”380″ bindValue=”{dataSource.NameList}”/>
In the above way I am able to fetch single record.But not multiple record because I don’t know how to apply
changewatcher for collection object.
Could you please provide some hints or links how to implement this?
Regards,
Sourav
Thanks for the great component. I have already successfully integrated it.
My Model returns ICollectionViews. Having to provide an ArrayCollection to the dataProvider is limiting. Have you thought of accepting ICollectionView to the dataProvider? It would allow you to accept any collection that implements ICollectionView (which is probably ALL of them!)
Niel,
In the latest version in the google code site I’ve changed the dataProvider to be of type ListCollectionView (which enables you to use either an ArrayCollection or an XMLListCollection). I think that’s about as generic as I can make it (w/o requiring a large amount of changes) as I rely heavily on the functions in the ListCollectionView class (ie, getItemIndex, removeItemAt, etc…)
Thanks for the suggestion though
Hi
This component is awesome.
I looked to your Email demo. But i noticed that search is not made inside the email id. If i give search text as “gm”. Then i expect that all email id should be shown in drop down but none is shown up.
Thanks
ilikelfex
ilikeflex,
Which part of the text to search is determined by the
matchTypeproperty. In the email demo it’s set to “word”, you could change it to “anyPart” so it matches “gm”.Hi Hillel,
I have tried to use AutoComplete text input connecting Java using JSP. When i run that application it doesn’t showed any errors.From JSP the data is reterived to Flex. But the dropdown is not working. I have used HTTP Service as RPC.
Kindly help me to solve this issue.
Regards,
HaliflifeBaby.
Halflife Baby,
I’m sorry, based on the info you’ve provided it’s very difficult for me to help you. If you could create a sample application which demonstrates your problem I’d be happy to take a look at it.
Hi Hillel,
Could you just reply for my question here itself?
Regards,
HalflifeBaby.
Halflife Baby,
Your question is essentially “it’s not working please tell me why”, I’m sure you could understand why that would be hard to answer. Are there any more details you can provide. The best approach to solving these types of problems is to eliminate variables. Does the component work if you hard code the data (as opposed to loading it remotely). Also, have you checked out the DynamicData.mxml file in the examples folder (it gives a basic sample for using the component with remote data).
Nice component but I’m finding that, once a field is selected:
(1) It appears in white text, always. This doesn’t seem to be changeable
(2) There appears to be a tiny field to the left of the displayed value, which is editable and about 4 pixels wide
(3) There’s another field shown to the right of the displayed value, also containing the displayed value. I think this shows the content of ‘searchText’.
The end result of all this is that the field, once a value has been selected, looks extremely ugly and in fact unusable.
Is this something anyone else has problems with? it’s weird no one else has mentioned it…
Regards,
Jamie.
Jamie,
Which version of Flex are you using. There are currently some style issue in Flex 4, I hope to release a new version soon.
i was looking for the autocomplete.
thanks for the information.
regards
Hi Hillel,
First up, I’d like to offer my sincere thanks for making this component available. It’s proving to be a tremendous resource for us. If and when we can contribute to it’s further development, we certainly will.
Next up, I’m looking for some help on styling the actionsMenu button. In the online demo for the AdvancedAutoComplete, the inline button and associated menu have some custom styling (no border on the button, a rounded header for the menu, etc).
Can you give me some guidance on how to affect this styling? The default implementation I see is to render a standard button. And the menu appears several pixels below the control, without the nicely rounded header piece.
Cheers!
-Matt Towers
Matt,
The style is defined in style.css in the actionsMenuButton tag. It’s applied to the button in ActionsMenu.mxml on line 70.
Let me know if you need any more help applying the style.
I see the code you mentioned but I’m not sure I follow how to make this work. By default, it appears that the actionsMenuButton CSS class refers to com.hillelcoren.assets.skins.BlankSkin, which is a trivial extension of ProgrammaticSkin.
My assumption is that there is a different bit of styling that you are using for the Advanced AutoComplete tab on the demo page (http://web.me.com/hillelcoren/Site/Demo.html)
BTW, would it be possible to view the source of the demo page? Presumably I can find the answer in there? However, the View Source menu item is enabled but the source page is 404.
Matt,
That’s actually all the styling for the demo, the source for the demo is in the examples folder of the zip file.
I found it. The problem was that default.css was not included in the build path. The fix is to go to
Project -> Properties -> Flex Library Build Path
In the Assets tab, make sure default.css is included as a “non embedded file to include in the library”
Thanks large for your help, and again for your hard work on this project. Us == Big fans
I’m having the same problem as Matt, but I don’t see any assets tab in Flex 4.
Hi ,
I am using an XML file which has nearly 26000 records fo Companies. Each Company Node has 25 child elements.
I can successfully implement the autocompletecomponent but I am looking for some help on performance issue.
It takes nearly 1 second delay while I am typing in the Autocomplete input box. My autocomplete is generic to all fileds in the XML file i.e. it searches for word match in all fields e.g. 26000 x 25 = 650000 words to match with.
Can you show me a way to improve performance?
is there a way to improve this?
Gaurav,
As luck would have it, I’ve written a post on exactly this topic
http://hillelcoren.com/2009/04/17/faster-searching-in-flex-part-2/
Hope it helps,
Hillel
Your RSS feed is only working every now and then, i’m on a macbook running shrook if that helps
Gary,
Sorry to hear you’re having issues with the RSS feed. My site is hosted by wordpress.com so I’m not sure if there’s anything I can do to fix it.
Beautiful. Saved me a lot of time. I was using Adobe’s AutoComplete component in their extras package, which stopped working in sdk 3.5. This one is a lot better.
Nick,
Awesome, happy to hear that the component saved you time.
Let me know if you run into any issues.
Best,
Hillel
Hillel,
This is a great component, thanks!
I just had one question. Would it be possible to have the selected item text displayed just as text? I know that we can set the selectedItemStyleName to none, which makes it look like just text. However, there ends up being spacing to the left and to the right of the text in the textbox. As I’ve placed the autocomplete in a form, I would need it to be consistent with the other textinput boxes. Let me know if there would be a way to fix this!
Thanks,
Laura
Laura,
The spacing to the left is b/c there’s a very small text input there to allow the user to type text to select a new value. You could use the source code and modify it to not include it. You’d want to add something like ‘visible=”false” includeInLayout=”false”‘ to the ShorterTextInput tag at the end of SelectedItem.mxml.
Thanks a lot Hillel!
FYI, sourceview for the demo is broken…
http://web.me.com/hillelcoren/Site/srcview/index.html
404
Fantastic blog.
Hi Hillel,
You’ve created an great component, but I have one question. Is there anyway to pre-populate the field (onload). I’m using it for a messenger and there are times when the user either replys or clicks a name which will be populated in the TO field (which obviously uses your component) however I haven’t spotted a method to pre-populate the field on load.
Hey Hillel,
No need to reply, I figured it out. It appears that someone else was having the same problem and although I was using the same line of code:
autocomplete.selectedItems={items retrived from the database}
I failed to properly name my OBJECT to what it should be. All is working now. Thanks again for one of the best AutoComplete components for Flex out there.
I am facing the same issue that Vinoth facing.
setting selectedItemStyleName=”none” doesnt change the style.
Man,
Are you using the source or the SWC (if you’r using the source please try using the SWC)
Yes I am using swf file. its in the libs folder.
sorry typo, its SWC file.
Man,
Just to be clear, what are you seeing when you set it to “none”?
Hello Hillel,
Thanks for your work, this is a great component !
Unfortunately i can’t use it beacause of a tiny skin’s bug.
Please, Let’s try this simple demo :
Just enter a new entry and click the test button without press enter when your component has the focus. The button skin seems to stay in a down state.
I can’t find the issue.
Please could you help me to resolve this bug.
thanks for advance
Mat
Matboul,
I’m sorry, but your demo didn’t come through. Maybe try emailing it to me.
Hi Hillel,
Sorry to have troubled you !
It was a emphasized’s style problem with halo theme in a spark app.
The clicked button came (i don’t know why…) to emphasized state and not down state.
I bypass this pb with a s|Button.emphasized css selector with the same skin-class than default one.
Everything is ok with your nice component.
thanks