There are several Flex components for handling auto completion out there, for example components called CompletionInput, Autocomplete TextInput or Adobes AutoComplete Input. For a current Flex 3 based project I decided to use Adobes component and had the following issue:
If you select the first item of the results pressing ENTER or just clicking by mouse, you will “lost” the value of the selected item. That means, it won’t be shown at the TextInput located on the top.
It seems, that this issues appears using Flex 3 only (not Flex 2).
Example
For testing both components:
1) Type just a “b” in one of the TextFields
2a) Press ENTER
2b) Or select just the first item clicking by mouse.
3) Compare the behavior of both components.
Solution
To show the label of the selected item within the TextField just override the method called close of the com.adobe.flex.extras.controls.AutoComplete which extends the mx.controls.ComboBox.
close() method ( Download code )
-
/**
-
* Closes the combox and set the selection which is lost using Flex 3
-
*
-
* @event Event Trigger event to close the combobox
-
*/
-
override public function close(event:Event = null):void
-
{
-
super.close(event);
-
-
if(selectedIndex == 0)
-
{
-
// set the text using the selected label
-
textInput.text = selectedLabel;
-
// select the text from typed text position to texts length
-
textInput.setSelection(cursorPosition, textInput.text.length);
-
}
-
-
}
Download full source
Full source of the example above: AutoCompleteSample.zip (Downloads: 6005)
May 8th, 2008 at 1:19 pm
That’s pretty good improvement. Thanks !
May 13th, 2008 at 3:36 pm
Anyone have any thoughts on how to feed an autocomplete from a database that has tens of thousands of records?
I’m using ColdFusion w/ Flash remoting and MSSQL.
Thanks,
David
May 13th, 2008 at 6:15 pm
Wow, nice. Thanks Jens.
David,
Regarding the feed a lot of records, I have been very successful with 500k+ records by using stored procedures that would be triggered only after a set amount of characters… eg. 3 letters.. then trigger the search.
For some specific cases I used a special table that was computed off-line, but that has algorithms and it’s beyond the scope…
May 14th, 2008 at 5:51 am
Thanks man!
Works nice
May 20th, 2008 at 9:19 pm
Thanks for the post. You’ve made a very nice modification.
One problem I ran into was not being able to use multiple autocomplete components in the same form. As soon as you would complete one combo box and then begin typing in another the first combo box would only display the _typedText data and not the label of the selected item. This can be addressed by adding the following line to the focusOutHandler method
_typedText = textInput.text
May 21st, 2008 at 6:16 am
Ryan,
have you used the same data as the dataProvider for all components? In this case the component changes it while typing a text and all other components, which use the same data, will are affected.
-Jens
May 23rd, 2008 at 12:04 pm
Thanks!
May 26th, 2008 at 10:12 am
Servus Jens,
I have installed the AutoComplete. But there is one problem. The “prompt” property is not working for the AutoComplete Component.
The text “bitte eingeben oder auswählen” should be in the textfield like the normal Combobox.
Any idea?
May 26th, 2008 at 10:31 am
Ok I found the solution! Can I send you the new code, that you maybe update the component?
May 28th, 2008 at 12:44 am
I’m having an error while using your component. I added a change event to the control and I’m trying to grab the value of the selectedItem, however it’s producing errors.
It seems that the following code does not work:
public function ChangeEvent(evt:Event):void
{
variable=e.currentTarget.SelectedItem.name;
}
I’m trying to store the value of the selected item’s name field of the array into a variable.. but Flex doesn’t seem to be able to access that field.
Am I doing something wrong?
May 29th, 2008 at 4:37 pm
Thanks but there is still an issue about your solution.
Try clicking outside the combobox when it’s opened and the first value will be selected…which is not normal wanted behavior.
June 5th, 2008 at 12:13 am
Thank’s for your solution, i hassle around with this component for weeks now.
@PeZ this is the normal behaviour of a ComboBox it selects the current selected item and not the first one.
My problem is to set the value of the field via the text property. To use the text property is probably wrong. I thought to use the typedText method but Flex complains about an unreachable method. The problem is, if you use text it is cleared after the close event is triggered.
Currently i added this check to the close method:
if(selectedIndex == 0 && selectedLabel != “”)
…maybe there is a better way of doing that?
June 16th, 2008 at 9:23 am
[...] wurde hat unter Flex 2 wunderbar funktioniert, jedoch sollte sich mit Flex 3 ein gewisses Fehlverhalten einschleichen. Für ein Flex 3 Projekt wollte ich diese Komponente einsetzen und hatte bisher mit [...]
July 12th, 2008 at 1:01 am
I have found an issue in this component.
try this:
when the user press enter after typing the default button’s click event does not dispatches.
thanks anyways, its a very usefull component.
July 24th, 2008 at 12:07 pm
how to integrate the auto complete component with flex 3
August 14th, 2008 at 4:41 am
Thank you so much for resolving this issue. I have been trying to find / fix this for several days now!!!
August 22nd, 2008 at 7:59 pm
Great component, but I needed one more feature. I added a NotInList event, so that I could add entries to the dataprovider if they were not in the list. To do that, just add:
if(dataProvider.length==0 && textInput.text!=”" && textInput.text!=null){
dispatchEvent(new Event(“notInList”));
}
to the focusOutHandler event. and add the meta data for the event at the head of your component.
September 8th, 2008 at 5:33 pm
Hi,
Can you send (or post) me the solution for the “prompt” issue as well ?
Thank’s
rico
October 16th, 2008 at 5:09 am
Here is solution for my last question:
if(collection.length==0 || typedText==”"|| typedText==null)
{
typedText = “”;// New line added here.
This will flush invalid input if it nots in dataProvider.
Thanks.
October 30th, 2008 at 5:06 pm
Thanks for sharing! This worked nicely for the same issue I was having with the Flex 3 autocomplete.
October 30th, 2008 at 8:38 pm
Hi,
great patch, I was searching for it in these hours!
@Markus
Can you post your solution for the prompt problem?
@Rico
Maybe can you post it?
Thanks a lot!
November 4th, 2008 at 6:44 am
This codeis for restricting invalid character to type from user.
if(collection.length == 0)
{
typedText = typedText.substr(0, typedText.length – 1);
cursorPosition = typedText.length;
}
else
{
typedText = “”;
cursorPosition = 0;
}
I have got one problem, if user will type above normal speed there is need to serialized keyboard input.
If anyone knows solution please let me know.
Thanks.
November 4th, 2008 at 10:22 am
To get rid from “prompt” problem, I have added one object {data: -1, label:”Select Country”} @ top of dataProvider & removed “prompt”. So on change we can check for (selectedItem.data == -1) to perform next action.
Thanks.
November 4th, 2008 at 1:27 pm
Here’s a quick fix to “enable” the default button feature…
Add this method to AutoComplete.as:
override protected function focusInHandler(event:FocusEvent):void
{
super.focusInHandler(event);
var fm:IFocusManager = focusManager;
if (fm) {
fm.defaultButtonEnabled = true;
}
}
Cheers!
November 4th, 2008 at 2:17 pm
@prashant
Thank you for the prompt hint, I’ll try it!
November 10th, 2008 at 11:53 am
Hi,
I m facing on strange problem here, please see steps:
1. Suppose there are three items in a dataProvider say
[A], [AB], [ABC]. If I will type ‘A’ & then focus out then 1st item will get select but its not calling CHANGE event.
I have observed that if [typed text = one of item label] then this issue is coming.
Can anyone please suggest solution.
Thanks.
November 13th, 2008 at 9:03 am
First off, great fix. I had the same problem (plus a couple of others) so I ended up deciding to write my own AutoComplete component.
You can check it out at:
http://hillelcoren.com/2008/11/10/flex-autocomplete-component-a-new-take-on-an-old-standard/
Best,
Hillel
November 17th, 2008 at 11:42 am
Please see this link:
http://kuwamoto.org/2006/05/11/example-code-updated-for-beta-3/
May be useful!
Thanks.
November 26th, 2008 at 4:57 pm
[...] Version de ce composant modifiée pour être compatible avec Flex 3 [...]
December 1st, 2008 at 9:04 pm
Thanks for the tip. I wouldn’t characterize Adobe’s solution as faulty though. Theirs allows for entries not in the list. With your solution, it isn’t possible.
For instance, and forgive me because I know this isn’t possible, but if I had a country named “Berm” I couldn’t enter it in. It keeps forcing me to Bermuda. Bermuda is a nice place, but it just isn’t Berm.
With Adobe’s solution, I can hit up/down and select Bermuda if I want it, or I can just enter Berm.
Thanks again for the code.
December 13th, 2008 at 11:03 pm
Hi, really like the fix that you made here. I’m looking to try and make an AutoComplete class in AS3 (or Flex) that will auto-complete multiple terms. In the framework of your example, if I started typing ‘b’, selected the first term Bermuda, *and then* started typing ‘b’ or another letter, that the auto-complete would pop back up and try and complete that next term. Any thoughts that anyone has on how to do this (preferably through an existing component) would be fantastic, I appreciate the help!
Regards,
Kunal
December 15th, 2008 at 7:24 am
[...] Krause has posted a modified version of the component which allows the user to press ENTER, TAB or click their mouse button to select [...]
December 27th, 2008 at 8:41 pm
[...] websector.de [...]
January 20th, 2009 at 11:38 pm
great fix. Im trying to get the example working by populating the datagrid from a webservice call however each whenever i do this the text field always displays with the first result of the web service call even before i click in the text field. Im new to Flex but wondering if its something i can change with your implementation? thanks
January 28th, 2009 at 10:35 am
hi i need to autocomplete componet for which i will feed the data provider dynamically based on the typed text. can u have solution for this?
January 28th, 2009 at 4:54 pm
Is there a way of pre-selecting an item from the dataprovider. I am adding a new object to the dataprovider using a popUp titleWindow. However when returning the first object is always displayed. I have tried setting the text, typedText and selectedItem to no avail.
Does anyone know how I can do this.
March 30th, 2009 at 3:21 pm
changed code to this to be able to catch the change event. I needed to populate other controls according to what the user picked.
if(selectedIndex == 0)
{
textInput.text = selectedLabel;
textInput.setSelection(cursorPosition,
textInput.text.length);
dispatchEvent(new ListEvent(ListEvent.CHANGE));
}
May 8th, 2009 at 1:04 pm
I have one problem.
I have two instances in my application of this components.
Whe I found in one component, no problem.
But whe i go to the next autocomplete, and i write a value, the other autocomplete change the value.
I put diferents id, and diferents filter functions.
Someone can help me please?
Sorry for my english.
kind regards.
May 20th, 2009 at 5:50 pm
great code, thanks. can you tell me how i can modify to only start the autocomplete after the user has typed three letters/vales?
May 30th, 2009 at 8:09 pm
[...] an annoying flickering whenever a key is pressed. Plus there were a few issues with it that I found here (make sure to read all the comments). Plus, since it is not based on TextInput, there are a few [...]
June 8th, 2009 at 3:51 am
awesome code. I just have one problem. I am compiling against Flash player 10.0.0 (i.e. In Flex builder, Properties –> the required flash player version is 10.0.0). when the user inputs ‘ab’ and presses enter button, neither the drop down closes nor the first value is selected.
Any help appreciated.
June 11th, 2009 at 3:01 pm
Hi Everyone,
I just came across this post and noticed a few people had questions I can help with. I’m the brains behnd Flextras.com a bunch of Interface Flex Components. If you’ll excuse me while I wear my marketing hat for a second:
David asked how to populate the AutoComplete data from a database. The Flextras AutoCompleteComboBox supports that functionality.
Set the AutoCompleteRemoteData property to true. http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#autoCompleteRemoteData .
Start with an empty / null dataProvider and as the user starts to type, capture, and cancel the autoCompleteDataProviderFilterBegin event ( http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#event:autoCompleteDataProviderFilterBegin
). In the event handler start your remote procedure call to get the new data.
We have an example in our developer edition download of this.
Tim asked about pre-selecting a value in the AutoComplete. Our AutoCompletComboBox has a field named AutoCompleteResetIndex which will allow you to specify any start value.
http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#autoCompleteResetIndex
June 11th, 2009 at 4:51 pm
Sorry I’m ne to Flex so I’m not sure if this is a dumb question but are there instructions for setting this up?
July 1st, 2009 at 6:34 am
Nice fix! The only thing I would add these 2 lines so that change event works properly – in case someone using that.
var e: Event = new Event(“change”); dispatchEvent(e);
August 4th, 2009 at 9:31 pm
Thank you very much!!!!
August 13th, 2009 at 7:57 am
Thanks a lot for this fix, great help.
August 31st, 2009 at 10:48 am
can anyone let me know how to use Autocomplete TextInput
to display in the delow manner.if we type ‘A’ it should display as,and only ‘Cricket’ should be selected, other fields should not be selected.
Country
Australia
Capital
Melbourne
Game
Cricket
September 6th, 2009 at 8:41 am
Thanks for the fix, I found this bug when I was testing Adobe’s AutoComplete TextInput.
Thanks again!
With kind regards,
Satheesh C.
September 25th, 2009 at 7:00 pm
Hello,
I have been able to use the modified component provided and it works nicely with one small exception. When I click on the drop-down arrow at the right of the input box, nothing happens. I was hoping it would show me the whole list I have.
I hope someone can provide some guidance.
Thanks,
Carl
September 29th, 2009 at 11:08 am
Hey. didnt read all the replies, if someone already mentioned this problem, dont care about this one. So if “Berlin” is (the first index) in your list, there is no chance to search for “be”. it autocompletes with the first item in your list (this case “berlin”)… if you wanna fix it, go to:
override protected function commitProperties():void
and change
else
{
showDropdown = true;
selectedIndex = 0;
}
to
else
{
showDropdown = true;
selectedIndex = -1;
}
have a nice day
tim
September 29th, 2009 at 6:21 pm
Thanks for the suggestion Rimjim, but that didn’t change anything. I’d be staisfied if I could hide the drop-down arrow button and have my whole list show when someone clicks in the textbox. Does anyone have an idea how to do that?
Thanks,
Carl
September 29th, 2009 at 6:38 pm
Turns out all I needed to do was use the open method on the combobox.
October 3rd, 2009 at 2:27 am
I’m using this as form input replacement to offer suggested (not enforced) input. I have a couple of issues.
1) Any way to add maxChars to the text input, I need to set the limit on the number of letter entered, I have done this with a string validation but if you type after the max chars warning it nulls out the input.
2) if you add a string validation you can no longer write to the text property it nulls out, you can still write to the typetext property but this opens the list and I have to call close after a 1 second timer.
TIA
flash
October 12th, 2009 at 11:32 am
[...] Input component http://hillelcoren.com/flex-autocomplete/ http://www.websector.de/blog/2008/04/30/quick-tip-avoid-issues-using-adobes-autocomplete-input-compo... http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291 [...]
October 21st, 2009 at 3:22 am
Awesome.
Thank you.
February 14th, 2010 at 4:42 pm
[...] «Quick tip: Avoid issues using Adobes AutoComplete Input component using Flex 3» [...]
March 4th, 2010 at 9:25 am
Hi,
Do you have any version working with flex 4? or any other solution?
March 21st, 2010 at 4:36 pm
Hi,
I am tring to use the labelFunction but i get this error :
Implicit coercion of a value of type void to an unrelated type Function.
this is my code :
private function allOwners_resultHandler(event:ResultEvent):void{
var owners:ArrayCollection = event.result as ArrayCollection;
myComboBox.dataProvider = owners;
myComboBox.labelFunction = “ownerName”;
}
private function ownerName(item:UserBean):String {
return item.firstName + ” “+ item.lastName ;
}
Can anyone please suggest solution.
Thanks.
September 1st, 2010 at 9:36 am
Thank you for this great solution.
However I had to remove line 340 where it says:
selectedIndex = 0;
Or otherwise when the list is filtered to a level only one item meet the criteria no change event is fired when this item is selected, because you pre-selected it.