This component does not fully support Flex 4.5 and above. I’m leaving this page up as the component/code may be useful to some developers but I’m no longer actively supporting it.
Advanced Flex AutoComplete component which supports browsing, selecting and ordering multiple items.
Important Info
- License: The component is freeware. You’re welcome to use it anyway you’d like, I just ask that you send back any bug fixes or improvements.
- Support: I try as hard as possible to respond to all questions within a day. I’ve been using the component for a while now and am pretty confident that it works well. If you’d like to extend it I’m happy to work with you to get your feature working.
Version History
- 1.2 released on August 4th, 2011
- 1.1 released on October 25th, 2010
- 1.0 released on July 3rd, 2009
- 0.98.2 released on May 11th, 2009
- 0.98.1 released on April 7th, 2009
- 0.98 released on March 12th 2009
- 0.93 released on February 1st, 2009
- 0.91 released on January 1st, 2009
- 0.90 released on November 10, 2008
Other Options
A single solution usually doesn’t work for everyone. Here are some other excellent Flex Autocomplete components which may better fit your needs.
- Flextras AutoCompleteComboBox – comes with support
- Tink’s FilterComboBox – more lightweight
- Flashcommander’s Flex 4 AutoComplete – uses Spark
Hillel Coren 
Hopefully a quick question. I use the component in a Flex 4 form that I navigate primarily through the tab key. The component allows only one selection and no new items can be added. Typically, I preset the selectedItems in the AutoComplete to values I received from a database. As I tab through the various fields on the form, my preselected values are being replaced with prompts. Is there a way to ‘save’ the preselected items so that if the value is not changed as the user tabs through, those preselected items are not forgotten and then re-applied?
Matt,
I’m not sure I’m following entirely, but… could you use a focusOut listener which simply reapplies the preselected items?
I was thinking that. I just wasn’t sure on what component I would add it. Should that listener go on the AutoComplete itself or on the TextInput?
Matt,
I’d add it to the AutoComplete (you won’t see the event in the code completion but it does fire the event).
That took care of it. Thanks. Great work, by the way. I hope to be as good at Flex someday.
Hi Hillel,
I’m afraid that I’m a bit stuck. I’m using a setup rather like the DynamicData, to pull data into the control from a remote server. This part works fine. The problem is that when the user selects the item (either by keyboard or mouse), the selectedItem property remains set to null, the searchText is deleted, and I have to start over with data entry again…but I can never get anywhere.
I’ve been tracing through the code in handleSelectedItemsChange(), and I see a CollectionEventKind.ADD event come through, immediately followed by a CollectionEventKind.REMOVE event.
I’m at a loss to explain whats happening. Perhaps you’ve seen this before ?
Thanks so much for your contribution. I anticipate that I will get much mileage from this component.
–brian
Brian,
Hmmm… never heard of that one. I’d suggest adding something like the following in handleSelectedItemsChange
trace((new Error().getStackTrace())
Maybe it’ll show you were the remove is coming from.
If you can build a sample app which demonstrates the issue I’d be happy to take a look at it.
Hello, first of all thank you for providing such a great component.
I found a bug. If the Allow Duplicates option is not selected, when I select the “Almond” and
“Antique Brass”, and then I enter “A” and press the Enter key, after that I deleted the “Antique Brass”, find “Almond” can repeat
Leon,
Thanks for catching that, I’ll be sure to fix it in the next version of the component.
Best,
Hillel
Hillel,
I am using this component as an itemrenderer in a datagrid. Works perfectly.
I’m now doing some automation testing with FlexMonkey (using MonkeyLink), and I am getting a strange error when selecting from the combo:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.automation::AutomationManager/isObjectChildOfSystemManagerProxy()[C:\work\flex\dmv_automation\projects\automation\src\mx\automation\AutomationManager.as:2082]
at mx.automation::AutomationManager/recordAutomatableEvent()[C:\work\flex\dmv_automation\projects\automation\src\mx\automation\AutomationManager.as:2060]
at mx.automation.delegates.core::UIComponentAutomationImpl/recordAutomatableEvent()[/Users/grroggy/Documents/FlexMonkey2010/FlexAutomationLibrary3_4_1/src/mx/automation/delegates/core/UIComponentAutomationImpl.as:325]
at mx.automation.delegates.controls::ListBaseAutomationImpl/recordListItemSelectEvent()[C:\work\flex\dmv_automation\projects\automation\src\mx\automation\delegates\controls\ListBaseAutomationImpl.as:206]
at mx.automation.delegates.controls::ListBaseAutomationImpl/mouseClickHandler()[C:\work\flex\dmv_automation\projects\automation\src\mx\automation\delegates\controls\ListBaseAutomationImpl.as:586]
Any ideas?
Jon,
I’m sorry, I’m not sure. I use FlexMonkey a bit myself and I haven’t run into this issue with the AutoComplete. Which version of the Flex SDK are you using. I’ve seen issues when mixing the MonkeyLink with the 3.2 SDK.
Hi,
I’m trying to play a bit with this great component you made and I’m trying to understand which files are actually needed.
In the downloadable archive there is plenty of stuff and I’m really just interested in keeping what’s related to simple AutoComplete.
Thanks a lot and sorry if I bother with such silly matters.
Stix
Stix,
The simplest way to use the component is to copy the SWC file from the bin folder of the ZIP into the lib folder of your project. The source is also included in the zip file in case you’d like to make modifications to the component or get an understanding of how it works.
Thanks a lot for the hint.
I know I can just copy the SWC, but I was hoping to use a “light” version of that.
I really just need the basic function, so I was hoping I could leave out some files.
On top of that, I need to add a skin, but I already read a comment about that, so I won’t ask about it, unless I start banging my head on the wall 🙂
Cheers
Stix
Stix,
There are two version of the component included in the SWC: AutoComplete and AdvancedAutoComplete. If you’re looking for a “light” version then you’d probably want to use the AutoComplete class. You shouldn’t need to worry about “leaving out files” as the compiler should do that automatically for you.
Good luck getting the skin working, let me know if you run into any issues…
Shalom, Hillel! First many thanks for an excellent control, it does exactly what we need. On thing though. I really like the Browser but I don’t like the big Browse button to invoke it. Besides changing the code (seems like Chooser.mxml is the only place, right?) is there any other way to make your control look more like a normal ComboBox – with an arrow-down icon to the right to open the Browser?
Many thanks again and cheers!
Klopus,
You should be able to implement that using the InlineButton feature. There’s an example at the end of the documentation which shows how to use the InlineButton to show the dropdown, changing the code to show the Browser instead should be pretty straight forward.
Best,
Hillel
Hello Hillel,
I really appreciate your wonderful AutoComplete component. I’m impressed with great job you’ve done and made it freeware and opensource.
Also I have to tell you that we had to extend your component to make it able to restrict user input into AutoComplete`s text field.
So we modified a couple of your classes to add this option, however we ready to share this.
Best regards,
Roman Malyarchuk
Hi Hillel,
Wow thank-you for responding to comments on you great autocomplete component for so long! I for some reason can’t seem to get dataTips showing on the dropDownList (for longer returned text that is clipped) – on the createDropDown() function I have set showDataTips = true as well as set the dataTipField again … anything jump into your mind as to why this may be not happening?
Thanks!
JP
Ok silly me … I just found out that you loose dataTip functionality when you make use of an itemRenderer in a list control. This functionality can however be mimicked by overriding the updateDisplayList function in the itemrenderer itself and setting the toolTip to a custom toolTip.
Thanks for letting me use this space!
JP
Hi Hillel,
I’ve been using the Flex 4 Beta version of the component. It works – kind of. I’ve noticed that the choices that appear when typing sometimes are not visible (you’ll see the background but not the text) or there are gaps between items.
I’ve also noticed that even if you have multipleSelection disabled, the selection results still come back in the selectedItems array and selectedItem is null.
Any idea (not rushing you) when we might see a new Flex 4 version? I realize re-factoring this for Flex 4 might not be trivial.
Jeff
Jeff,
I haven’t seen the issue where the items aren’t visible. If you could put together a sample application which demonstrates the issue I’d be happy to take a look at it.
The selection results are always in the selectedItems array (regardless of whether or not multipleSelection is enabled).
Best,
Hillel
Why is the SWC library 849KB? That seems huge.. Looking at the source files, including the embedded assets, it doesn’t seem like it should be anywhere near this size
Alex,
I’d guess the reason it’s so large is that the Flex compiler is adding in a bunch of stuff from the Flex framework. If you use the SWC in your project many of the Flex things will already be in your project so it shouldn’t add the full 849KB to your final SWF.
Hey Hillel,
Terrific work, this is a great piece of code that I’ve enjoyed using immensely. I have one quick question that I can’t seem to solve: How do I enable tab navigation for the component? Setting tabenabled=true doesn’t seem to work, nor does setting tabindex. I tried setting tabenabled for the Flowbox, and for its text input (wild guess), to no avail… is there any easy way to do this?
Thanks!
Alex,
Maybe this will help…
http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-740
Hi Hillel,
thanks for the component. it works fine, but i have some problems implementing it inside a dataGrid.
I have the advanceAutoComplete inside the dataGrid ItemEditor with a browser.
I use the browser and select an item of the dataGrid of it, after that I set the focus to my DataGrid and when I change of column to the next and use “SHIFT + TAB” to get back to the column with the autoComplete throw an error saying that dosn’t found the property data.
Pablo,
I’m sorry, but b/c of the way the DataGrid handles focus it isn’t possible to use the Browser when using the AutoComplete as an ItemEditor.
Try this Pablo. I use the AC component in a datagrid as an itemeditor.
Here is the column.
here is the component (itemEditor)
The datagrid has an itemEditBegin event. This is where you can create an itemEditor instance and pre-populate its dataprovider and and persistent or already selected options.
private function onEditBegin($e:DataGridEvent):void
{
var colName:String = $e.currentTarget.columns[$e.columnIndex].dataField
if(colName == ‘possiblesolutions’)
{
// Handle the event here.
$e.preventDefault();
$e.currentTarget.createItemEditor( $e.columnIndex, $e.rowIndex );
AutoComplete($e.currentTarget.itemEditorInstance).dataProvider = _keyIBMProductsItemEditor;
AutoComplete($e.currentTarget.itemEditorInstance).selectedItems = createSelectedItems($e.itemRenderer.data.possiblesolutions );
//AutoComplete($e.currentTarget.itemEditorInstance).dispatchEvent( new FocusEvent( FocusEvent.FOCUS_IN, true, true) );
AutoComplete($e.currentTarget.itemEditorInstance).setFocus();
}
}
Then just handle the itemEditEnd event on the datagrid, like this.
private function onItemEditEnd($e:DataGridEvent):void
{
// Check the reason for the event.
if ($e.reason == DataGridEventReason.CANCELLED)
{
return;
}
else if ($e.dataField == null)
{
return;
}
if($e.dataField == ‘possiblesolutions’)
{
$e.preventDefault();
$e.currentTarget.editedItemRenderer.data[$e.dataField ]= buildProducts($e.dataField, $e.currentTarget.itemEditorInstance.selectedItems);
$e.currentTarget.destroyItemEditor();
$e.currentTarget.dataProvider.itemUpdated($e.itemRenderer.data);
}}
Hope that helps. You dont need the builder, users can edit the cell data and have an autocomplete list populate with data with the ability to multi-select values.
seems my column and component were cut off…
Column
Component
Hi Hillel,
What is the easiest way of using the flex 4 version? There isn’t any swc file bundled in that zip, tried using swc from flex 3 link and everything except the actionMenu seems to work fine. I copied code from advanceExample and changed the xml definition to,
Menu appears, but when opened it is empty (I see that it has room for three elements so looks like it is created correctly) and is not possible to close.
hmm my xml didn’t appear, you’ll have to imagine the lt and gt signs 🙂
fx:Declarations
fx:XML format=”e4x” id=”menuData”
root
menuitem data=”browse” label=”Browse…”/
menuitem data=”add” label=”Add Color…”/
menuitem data=”remove” label=”Remove All”/
/root
/fx:XML
/fx:Declarations
Andreas,
There are a number of issues using the Flex 3 versin of the component in Flex 4 (I would strongly recommend against it). The easiest way to use the Flex 4 version is just to include the source in your project. You could also build a SWC by creating a library project.
Hi Hillel,
Thanks for the great component!.
It really works for me. Could you please guide how to show all data when user click in the box and if he/she type something then functionality same as it already.
Thanks,
Ritu
Ritu,
I’d suggest taking a look at the InlineButton example at the end of the documentation, it’s very close to what you’re looking for.
Thanks Hillel,
It works for me, Thanks a lot for your help. Its really a great component.
Thanks,
Ritu
Does anyone know how to get rid of the blue focus border for the AutoComplete component when using Flex 4? (I’m using both spark and mx components in my app). I think it stopped working when I upgraded to the Flex4 compatible version of the component.
Normally, for my TextInput components, I can just set focusAlpha to 0 in order to get rid of focus border. That fix doesn’t seem to work with the autocomplete component (I’ve tried setting focusAlpha, borderSkin, borderStyle, and borderThickness on the top level AutoComplete as well as PromptTextInput, FlowBox and ShorterTextInput – all to no avail).
I have also tried commenting out all the calls to the drawFocus function inside the sub classes, again without success.
Anyone else have this problem?
Chris,
Have you tried setting borderVisible to false.
Unfortunately, I’m using the halo theme in the app, so borderVisible isn’t an available property.
Is there any other component that might be causing the focus border to display, or is something overriding the focusAlpha style somehow?
I am having the same problem. Did you manage to get rid of it eventually? I would like to know.
Hillel, I hope I’m not losing my mind here… I noticed whenever I use the AutoComplete, I lose the Design View in Flash Builder 4. For example, I can create a panel with several text inputs, radio buttons, etc. I can switch back and forth between source view and design view and everything works correctly. However, when I add the AutoComplete component, the design view stops showing the visual design of the panel. It’s not a huge deal, but I’ve started using the AutoComplete component pretty extensively and I liked being able to verify layouts with the design view. Am I doing something wrong?
I think I’ve narrowed it down to when I use the inline button feature. Has anyone else noticed this?
To function in flex4 comment the line 57 of ActionsMenu.xml
Hug.
Thiago Rodrigues.
City Gyn, Brazillian.
To expand on the bug Thiago describes in flex4, comment out line 57 of ActionsMenu.xml:
_menu.setStyle( “borderStyle”, “none” );
This will stop the null pointer exception that gets thrown in Menu.as because the menu’s “border” is null. The UI won’t look quite right, though, because you will have both a 1 pixel border and a drop shadow. To get rid of those, you can use a workaround. Add these lines immediately after line 57, which you commented out:
_menu.setStyle(“borderAlpha”, 0.0); _menu.setStyle(“dropShadowVisible”, false);
It’s a bit of a hack to leave the border but make it essentially invisible. Anyone know of a more robust solution? I didn’t try a border line stroke of 0 or a color of 0xffffff. That seemed like just a big a hack as the alpha style setting. I wish “none” just worked, but it doesn’t appear to be an option.
— Dan
P.S. Many thanks to you, Hillel, for awesome work!
Hi Hillel,
I am using your component for long time and now I have a task to display all fields in form in ViewOnly (readonly) mode.
I have tried to set some internal parts of autocomplete not enabled like PromptTextInput, but user can type inside anyway and change data.
Setting whole flag (not enable) for autocomplete field is not good for me. Editable flag in TextInput is better.
What is the best way to solve this task?
Here is my try with ReadOnly flag
http://code.google.com/p/oblikweb/source/browse/document/webapp/oblik/basetype/OblikBasetype.as?repo=webservices
Thanks, Maxim.
Maxim,
Could you explain the problem your facing with your current implementation.
Thanks
Hey Hillel,
Very nice component. We’ve been using it for 3 years now, and it’s great.
We’ve migrated to Flex 4 now and tested the beta and it works fine.
There’s one small thing we’ve had to change:
When the drowDown only fits above the the textInput, and it displays less rows after being filtered, the position of the dropDown should change so there is no blank space between the dropDown and the textInput.
We’re using an external dataProvider.
If you would like to see and maybe integrate this in your code, here it is:
http://www.copypastecode.com/33470/
Search for the ‘MODIFIED’ keyword i’ve put…
Mitz,
Thanks for the change, I plan to include it in the next version of the component.
Best,
Hillel
Hi Hillel,
thank you for the component, it’s very usefull.
please hillel what appropriate modifications in the autocompletion code should i do if the Arraycollection are populated from the server side. I explain: after typing 3 caracters, the web service is invoked and the first three caracters are passed as parameters. It’s just at this time that the result of the webservice corresponding to the searched string are stored in the arrayCollection and the list of suggested values appears in the autocompletion list. my question concerne the client side modifications. thank you in advance.
didi,
Take a look at the DynamicData.mxml file in the examples folder of the zip file, it demonstrates the best practice for using the component with server side data.
Let me know if you run into any issues,
Hillel
thank you for your advice Hillel,
i tried what you said, it work fine.
your are the best.
May God bless you.
Great component, and also thanks a lot for supporting it in this forum.
I want to use it one place with allowMultipleSelection=”true”, but I would like it if the user could select a range of items all at once. For example they could click one item, then scroll down a little bit, shift-click, and select all the items between the first and second one. The way my program may be used, a user might want to select a lot of items and having to do each one, one at a time, would be slow. Is there a way to do this? Thanks.
mitch,
If you enable the browser the user can multi-select items in it.
Sorry I don’t quite understand. I have enabled multi-select in the component with allowMultipleSelection=”true”. Are you talking about enabling something else in the web browser?
mitch,
Sorry if I wasn’t clear. I meant the browser in the autocomplete component (ie, set showBrowseButton to true).
That worked perfectly.
Is there a way to control the size of the window Browse brings up, with useListBuilder=true? For my data it’s a little narrow. Thanks.
mitch,
You could create a custom browser class which extends the existing one and specify the size. Then set your new class as the browserClass in the AutoComplete.
Hope this makes sense…
Ok, here is part of Focus trigger
private function FocusIn ( event:FocusEvent ):void
{
if (this.ReadOnly == false)
{
this.inlineButton = b;
this.inlineButton.enabled = true;
}
else this.flowBox.enabled = false;
…
}
When I set flowbox enabled = false user can type/clear displayed value.
I tried to set textInput.enabled = false but nothing changed, user can edit value.
Maxim,
It ain’t pretty, but…
this.textInput.textInput.enabled = false;
if (this.ReadOnly == false)
{
this.inlineButton = b;
this.inlineButton.enabled = true;
}
else
{
/* this.flowBox.enabled = false; */
this.textInput.textInput.editable = false;
}
Works as I wanted, thanks Hillel
Hillel,
This is a great component set that I’ve used in a large number of my components in the past. I have a question though.
In the AutoComplete component in the Spark version, is there a way that you can think of that I might go about reordering the inlineButtons after I’ve selected them? This feature is being requested of me and I don’t have much of an idea about how to go about it. I was thinking that it might be a good to refactor the component into a list and use a TileLayout instead of a Grid control, but that might be more work than it’s worth. Any thoughts about approaches I might take that would solve this problem? Am I overlooking a simple solution?
I forgot to mention that the particular means of reordering requested is dragging and dropping the buttons into their appropriate position.
Also screwed up referring to the inlineButtons when I meant the FlowBox buttons.
Just looked closer at AdvancedAutoComplete. My bad. Again, I’m super impressed. Sorry to waste time.
Sorry to bombard you, but I actually need to drag and drop to reorder in the horizontal layout of the AdvancedAutoComplete control. Can you explain why that doesn’t work?
Frank,
You’ll need to modify the source to make this sort of change. I believe you’ll need to set drag/drop handlers for the FlowBox class to make that work.
I actually just refactored the MultiSelect component to have a Spark list and set a TileLayout on it. I had to do some other things to get it to set a FlowBox inline, but I’m getting there. It’s certainly a hack for the time-being, but I may go back and clean it up and contribute to the project if it suits your liking.
Thanks again.
Hi Hillel,
Sorry to disturbing you. concerning the DynamicData.mxml
how could i modify the code in way to let free the user define the caracters to request.
in the actual version , if i request the word FOOTBALL, only the word FOO will be loaded as parameter to the WebService operation.
Please could you show me how to allow the user to define by himself the word to request? (in the DynamicData).
didi,
I’m sorry, I’m not following your question. Could you please try putting it another way.
assume that i want to request to server the list of words which containts the word “football” (such as : “toto play football”,”Spain has won the football cup”,…)
In the DynamicData code, in the handleSeachChange() function, the condition if(autoComplete.searchText.lenght > 2 && data_arrayCollection.length == 0) avoids you to enter more than three caracters at the first time you make your request.
by example, if i want to enter the word “football”, the enter data will be stopped at the word foo and the request will be processed. i would want the timer to handle the seached Text just after the moment that i’m sure that i have entered all the caracters corresponding to the word that i want to request( in that case football is the appropriate word).
NB: there is no error in the component, i just want your advices and orienatations to make possible what i want to do.
sorry for my english i’m french.
let me know if you have understood what i mean.
thank you in advance.
didi,
In that case you may want to use a timer which checks for a delay of 2 seconds to try to guess if the user has finished typing.
didi, look at link I posted few post before (19 July 2010). It is very Extended DynamicData code example with antispam/timer delay. Works like google search.
Thank you very much Maxim,
i read all your interventions, i suppose that you have now the best advanced DynamicData.
Please could you send to me, if it doesn’t bother, the attached corresponding file!
abdiasdidi@yahoo.fr it’s my email.
once more thank you.
Very small comment: when you set
showBrowseButton=”true” useListBuilder=”true”
the GUI shows a Cancel button on the left and OK button on the right. This is the opposite of most GUIs: they show OK on the left and Cancel on the right.
Thanks for contributing such a great component to the community!
Just had one issue I’m hoping you could help with.
When adding many values to the FlowBox, it resizes itself to have a larger “measuredHeight” value. But unfortunately, I have other components right under the AutoComplete component, and the FlowBox winds up “behind” those other components (in terms of Z-axis).
I tried to resolve this by:
1) forcing the FlowBox’s “height” value to stay constant when the component is not in focus
2) then when it gains focus, I set “height” back to “undefined” so that “measuredHeight” again takes priority
3) Furthermore, on focus gain, I’m creating a new TitleWindow which contains the whole AutoComplete component.
This is where I’m getting stuck. When I click on the auto complete text area, I just get a rogue text input near the top left of the screen that appears and disappears in a fraction of a second.
I’m thinking I’m probably over-complicating this. All I want is for the FlowBox to appear “above” any other components when it has focus. Any ideas?
Thanks again!
Dave
Update: I worked around this by dynamically resizing the parent container whenever the FlowBox resizes. This causes the components below to just get pushed farther down the page, which is fine with me! No more focus/unfocus handling either.
creationComplete=”creationCompleteHandler(event)”
private function handleFlowBoxResizeEvent(event:Event):void {
height = autoComplete.flowBox.height;
}
Dave,
Happy to hear that you were able to figure out a solution.
Let me know if you run into any other issues,
Best,
Hillel
Hi Hillel,
Again, thanks for publishing this work to everyone, I’ve been finding this very useful. I’ve come across a problem which I wondered if you knew how to get around. You can try this on your autocomplete color demo.
1) type ‘almond’ and press enter to add the item.
2) Now try to add a new item called ‘almonddark’. It won’t let you. This means you cannot have any new items that have a prefix with something already in the list.
Any ideas what I could change to fix this?
Many thanks,
Marc
Marc,
I think the auto-select functionality which is getting in the way, try setting autoSelectEnabled to false.
Hello Hillel,
I would like that when the user enter a text in the autocomplete, then this text is automatically set ToUpperCase.
And when the user enter AB then the autocomplete automatically display ‘AB, ‘ : it add automatically a comma after the second character.
Thank you,
Christophe,
There are two events to use to handle this: change and searchChange. The documentation explains the difference (there’s also a demo which helps explain the concept). You’ll probably need to bind eventL listeners to these events to accomplish this.
Hello,
I have not find how to do it. Could you developp the code function because you know more the application.
Thx,
Christophe,
Hi,
I am using flex4 with blazeds.
The user can enter sentence and I want that in after each word,character the user enter show the possible choices.
Examples for a valid sentence :
show all employees
show all employees with salary > 1000
show all managers
So if the user “show all” he will get two option (employees,managers) and after selecting one he can continue writing.If the user write “e” than only option is employees.After any change the server is called to get the possible suggestion for the new input.
Is it possible with to do ?
Thanks
Idan
Idan,
You should be able to do it. You’ll want to add a listener for the change event, in it set the dataProvider based on the number of items selected. I’ve tested it and it appears to work correctly.
When converting from Flex 3 to Flex 4 we got a compilation error. We have
and then a .css definition for autoCompleteSelItem. extends AdvancedAutoComplete. The compiler calls this an error and says:
Invalid value: autoCompleteSelItem. It must be one of macMail, facebook, underline, none.
Can we set a style for the selected item? Thanks.
It looks like some MXML got deleted from my post. We declared a
components:AutoComplete object with an attribute
selectedItemStyleName=”autoCompleteSelItem”
where components:AutoComplete extends AdvancedAutoComplete.
The Flex 4 compiler says this is an error:
Invalid value: autoCompleteSelItem. It must be one of macMail, facebook, underline, none.
Mitch,
Is autoCompleteSelItem a custom skin you’ve created?
It’s the name of a css style.
Mitch,
Try removing the metadata from above the setter function for the selectedItemStyleName property in AutoComplete.mxml
Hi,
I use the component, and it was work very well.
After I update the flash flayer to “flashplayer_10_ax_debug” (10.1.82.76) the component display some blank row (item) on list randomly.
Anyone know how to fix it?
Hillel,
Great component, I’m a long time user and I’m finally getting around to upgrading to your latest version.
I’m hoping you know of an elegant way to accommodate my use case. My DataProvider is dynamic in the sense that properties, specifically the “labelField”, on the objects it contains can change at run time. When this change happens the AdvancedAutoComplete component continues to display the old value instead of the new value.
Obviously my application knows when these values change. So as a workaround I’m just resetting the selected items and it seems to work. However, I was wondering if there was a more elegant solution out there?
Ed,
You should be able to modify the source and use BindingUtils to watch the value of the labelField and update the component when the value changes.
I think I found an issue on your component.
I set the auto complete with allowMultipleSelection=”true” allowNewValues=”true” allowEditingNewValues=”true”
then when I type the text with the new value and commit it, if I want to edit the value when I edit it I want the drop down to appear if the editing value if match the items in data provider but it doesn’t, I found that the text input did not fire the change evnent
example data: [one, two , three]
if I insert [threo] which is not in the data then I want to edit it to match so I click at the and delete o but the drop down is not appear, I must delete all the text and insert text to make the drop appear
Thanks
P.S. Thanks for a great component
Pitiphong,
I’m sorry, that’s just a limitation of the component.
I’ve downloaded your autocomplete’s source code and try to make this work.
Now I think I make it work. I think I will send you the diff to you.
Hillel,
Suppose the following happens:
1.) User gives focus to the AutoComplete widget.
2.) User types some text which does NOT correspond to an item in the data provider.
3.) User gives focus to another widget.
Typically our users are very naive and often think the AutoComplete widget is a text box. Therefore, since their input remains on screen they assume it is valid. Currently we address this by manually clearing the searchText property.
If this is a common issue it might be nice if the next AutoComplete version could be configured to make it crystal clear to the user that their input was actually invalid. You haven’t already addressed this issue right? For now doing it manually works just fine.
Thanks again for all your hard work!
Thanks,
Ed LaFave
It seems I can’t set dataProvider in real-time to do online searching.
Or is there other ways to work with remote data?
Vicary,
If you haven’t done so already, check out the DynamicData.mxml file in the examples folder in the zip.
Awesome work!
One little bug I found… if the dataProvider has a Sort applied (i.e. “dp.sort; dp.refesh()”) and allowNewValues and allowEditingNewValues are both true, AutoComplete crashes if being used in a dataGrid and focus changes during manual text entry, if what is being typed in happens to partially match an item in the dropdown.
In other words, if “Frog” is in the list, and I type out “fr” and then change focus, it crashes in the Adobe Sort routine from an anonymous function being called from AutoComplete.
I would expect (best case) “fr” to simply be added as arbitrary text in this case, or be converted to “Frog” or (worse case) simply skipped.
Pete,
Thanks for the clear steps to reproduce the problem. I’m just about to start working on version 1.1 of the component (which will be mostly bug fixes). I’ll make sure to include a fix for this. For now you may want to use the source code and wrap it in try/catch so you don’t crash the app.
Best,
Hillel
Wow fast, free customer service too! 🙂
Suggestion as you rewrite: If it could easily be dropped into an external library so it can more easily be used in modules and frameworks… for instance I added this to get the icons to play nice with RSLs:
package com.hillelcoren.assets
{
public final class Icons
{
[Embed(source='icons/down.png')]
public static const DOWN:Class;
[Embed(source='icons/actionsDown.png')]
public static const ACTION_DOWN:Class;
[Embed(source='icons/actionsOver.png')]
public static const ACTION_OVER:Class;
I downloaded the version for flex4.Im trying to use the actions menu for the advanced autocomplete menu.
<components:AdvancedAutoComplete id="autocompleteStudents" x="56" y="60" width="187" height="22"
allowMultipleSelection="false" selectedItemStyleName="facebook"
prompt="Please select a student"
filterFunction="filterFunction" labelFunction="studentsLabel"
actionsMenuDataProvider="{ menuData }" itemClick="handleItemClick(event)" change="handleAutoCompleteChange()"
showBrowseButton="false" showRemoveButton="true" browserFields="{fields}" browserFieldsLabels="{fieldsLabels}"
Unfortunately I get this error at runtime (when I press on the actions menu to display it):
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls::Menu/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\controls\Menu.as:1391]
at mx.controls.listClasses::ListBase/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3962]
…
The error is thrown in ActionMenu.mxml class, at line: _menu.show(-1000, -1000).
Am I missing something? Please help
Thanks
Amalia
AmaliaP,
I’m not sure. It’s possible the data you’re using for the actionsMenuDataPrvoider is causing an issue. If you can put together a sample app which demonstrates the problem I’m happy to take a look at it. Also, check that you’re using the latest version of Flex 4.
What a awesome component dude!!!
Hello,
this looks like a great component, but I cannot get the most basic example to work under Flex 4.1 (Flash Builder 4), latest version on 9.oct 2010.
I create a “_data” ArrayCollection, like in your example and add the component in the simplest way:
I always get an error:
Initializer for ‘dataProvider’: values of type mx.collections.ListCollectionView cannot be represented in text.
I am using the Flex 4 Beta version of AutoComplete downloaded from this page, copied under my src folder, I reference it in the app tag, the code hinting is working.
I really appreciate any help.
Jure
Jure,
Is that a stable release or a nightly build (it’s pretty recent date). I’d suggest trying the latest milestone build.
Fantastic component!!
Just a question on validation using the mx:Validator
Using this be default fires when you delete a selected item as well as when the drop down drops. If I specify triggerEvent=”focusOut” it works a little better but still firs and shows the red box when the drop down fires.
Is there a way you can see that I can get validation (required) to work with this component nicely.
Many Thanks!
czr,
When working with validators I use the following
<mx:Validator source=”{ autoComplete }” property=”selectedItem”/>
<components:AutoComplete id=”autoComplete” dataProvider=”{ _data }”/>
Is this what you’re using?
Thanks Hillel,
yep thats exactly what I had but it does not behave nicely. Behaves a litte better if I put in triggerEvent=”focusOut”. The problem is that in both situations when you start typing and the drop down appears (I do a query to the backend after 3 key types) the validation is fired because I guess focus goes to the drop down and you get the red box. I would like validation to only fire when the component as a whole looses focus. Is there a way to achieve this.
Thanks again! 🙂
czr,
I have a new release coming out in a couple of days which I think may fix this issue (at least I can’t reproduce it using the latest code).
Awesome…. can’t wait to try the new code. This is a urgent requirement for me…
Thanks again!!!!!
I think that the alpha of the subcomponents should be set to 0 and the style properties like backgroundColor should be exposed at the top level. This would allow developers to directly bind such properties to e.g a presentation model using the curly braces syntax rather than using the tag to a setter function and accessing the subcomponents with the dot syntax.
Hi
Your component is allowing numerics. How can i restrict only to take alphabets?
Ashwin,
Try this…
autoComplete.textInput.textInput.restrict = “a-z A-Z”;
Best,
Hillel
Thank You Hillel.It Worked
Hello,
Great component but I have a little problem.
We use your component as lib in our “core.swc”. But when I use your component from our core it ignores the selectedItemStyleName property. I set the style to “none” (other won’t work either) but it keeps showing a button as selectedItem.
Alexander,
The styles are set using the defaults.css file (which should automatically be included). It’s possible that because you’re using it from your own SWC the style sheet isn’t getting automatically added. Try manually adding a reference to it.
It looks like AutoComplete.mxml in the latest download still includes a reference Application.application, which has been deprecated in Flex 4. Did I accidentally download a Flex 3 version?
Sherman,
Thanks for pointing that out, I’ll put up a new zip shortly which removes the reference.