Quick tip: Avoid issues using Adobes AutoComplete Input component using Flex 3
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: 8283)
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.
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.
hello is that I had some problems with the component to use with the flash builder 4, some of the problems are:
-Function filter does not work.
if you know any solution please send me the email you jpuerta@integracionweb.com.co.
thanks
I’m using your component in Flex builder 3 with sdk 3.4 and I’m trying to use it to expand and select the tree node that the user selected in the autocomplete component on the change event. However, I’m getting an error when I go assign the autocomplete seletedItem to the tree selectedItem. Can you please help? What am I doing wrong?
public function moveSelection(e:Event):void{
deviceSelected = e.currentTarget.selectedItem;
if(deviceSelected != null && deviceSelected.hasOwnProperty(label)){
Tree.selectedItem = deviceSelected;
var par:XML = Tree.selectedItem.parent();
while(par){
Tree.expandItem(par, true);
par = par.parent();
}
}
}
Hi, I am using AutoComplete as a itemrenderer in advanced data grid as one of a column.Also having the feature to add rows in the data grid.My problem is soon after when am adding new row in data grid, the values that i selected in the previous autocomplete combo get changed to default value that i set for autocomplete combo whenever i add new row to the grid. please help..
help will be appreciated..
Is there a way to change the background color of the autocomplete?