spark Combobox selection is not visible if list changes - actionscript-3

Question

I am using a Spark Combobox and a filter function to filter characters in the firstName and lastName. When user types "a" the drop down list is showing all the filtered items with selecting "aram,babu" in the drop down and also showing text as "aram,babu" in the textinput. If the user presses "r", the text input displays "aram,babu", but the drop down list selection disappears. Hitting Enter or clicking the mouse outside the drop down results in the wrong item (last item, i.e. "armu,babu") being selected.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
private function labelField(item:Object):String {
if (item && item as SalesPerson && item.lastName && item.firstName) {
return item.firstName + "," + item.lastName;
}
return "";
}
private var arr:ArrayCollection;
private var arr1:ArrayCollection;
private var salesPer:SalesPerson;
private function getData():ArrayCollection
{
arr1 = new ArrayCollection();
var salesPerson:SalesPerson = new SalesPerson();
salesPerson.userName = "ravi kumar";
salesPerson.firstName = "ravi";
salesPerson.lastName = "kumar";
var salesPerson1:SalesPerson = new SalesPerson();
salesPerson1.userName = "kiran kumar";
salesPerson1.firstName = "kiran";
salesPerson1.lastName = "kumar";
var salesPerson2:SalesPerson = new SalesPerson();
salesPerson2.userName = "james bond";
salesPerson2.firstName = "james";
salesPerson2.lastName = "bond";
var salesPerson3:SalesPerson = new SalesPerson();
salesPerson3.userName = "ravi babu";
salesPerson3.firstName = "ravi";
salesPerson3.lastName = "babu";
var salesPerson4:SalesPerson = new SalesPerson();
salesPerson4.userName = "rakesh babu";
salesPerson4.firstName = "rakesh";
salesPerson4.lastName = "babu";
var salesPerson5:SalesPerson = new SalesPerson();
salesPerson5.userName = "ramesh babu";
salesPerson5.firstName = "ramesh";
salesPerson5.lastName = "babu";
var salesPerson6:SalesPerson = new SalesPerson();
salesPerson6.userName = "aram babu";
salesPerson6.firstName = "aram";
salesPerson6.lastName = "babu";
var salesPerson7:SalesPerson = new SalesPerson();
salesPerson7.userName = "armu babu";
salesPerson7.firstName = "armu";
salesPerson7.lastName = "babu";
arr1.addItem(salesPerson);
arr1.addItem(salesPerson1);
arr1.addItem(salesPerson2);
arr1.addItem(salesPerson3);
arr1.addItem(salesPerson4);
arr1.addItem(salesPerson5);
arr1.addItem(salesPerson6);
arr1.addItem(salesPerson7);
return arr1;
}
]]></fx:Script>
<s:VGroup width="100%" height="100%">
<local:FilterCombo labelFunction="labelField" dataProvider="{getData()}"/>
</s:VGroup>
</s:Application>
<?xml version="1.0"?>
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" click="clickHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import spark.events.TextOperationEvent;
private var unfilteredDataProvider:IList;
override public function set dataProvider(value:IList):void {
super.dataProvider = value;
unfilteredDataProvider = value;
}
override protected function textInput_changeHandler(event:TextOperationEvent):void {
super.textInput_changeHandler(event);
if (unfilteredDataProvider is ArrayCollection) {
ArrayCollection(unfilteredDataProvider).filterFunction = filterMatches;
ArrayCollection(unfilteredDataProvider).refresh();
super.dataProvider = new ArrayCollection(unfilteredDataProvider.toArray());
}
}
protected function filterMatches(item:Object):Boolean {
if (item && item.lastName && item.firstName) {
if (String(item.lastName + item.firstName).toLowerCase().indexOf(textInput.text.slice(0, textInput.selectionAnchorPosition).toLowerCase()) > -1) {
// trace("traderDoFilter true")
return true;
}
}
return false;
}
private function clickHandler(event:MouseEvent):void {
}
]]>
</fx:Script>
</s:ComboBox>

Answer 1

Basically Combobox search is working based on labelfield, you can see the Combobox framework code.
Verify the below mentioned function:
ComboBox -> processInputField(Function)
if (itemMatchingFunction != null)//itemMatchingFunction allways null untill we assign our callback function
matchingItems = itemMatchingFunction(this, textInput.text);
else
matchingItems = findMatchingItems(textInput.text);//calling by default
So we need to assign our custom callbackfunction to itemMatchingFunction(public)
I have made some changes in your code try this, it has some bugs
<?xml version="1.0" encoding="utf-8"?>
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" click="clickHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import spark.events.TextOperationEvent;
import spark.utils.LabelUtil;
private var unfilteredDataProvider:IList;
namespace mx_internal;
override public function set dataProvider(value:IList):void {
super.dataProvider = value;
this.itemMatchingFunction = itemMatchingFunction1;
}
override protected function textInput_changeHandler(event:TextOperationEvent):void {
super.textInput_changeHandler(event);
if (dataProvider is ArrayCollection) {
ArrayCollection(dataProvider).filterFunction = filterMatches;
ArrayCollection(dataProvider).refresh();
}
}
protected function filterMatches(item:Object):Boolean {
if (item && item.lastName && item.firstName) {
if (String(item.lastName +","+ item.firstName).toLowerCase().indexOf(textInput.text.slice(0, textInput.selectionAnchorPosition).toLowerCase()) > -1) {
return true;
}
}
return false;
}
/**
* #private
*/
// Returns an array of possible values
private function itemMatchingFunction1(comB:ComboBox,input:String):Vector.<int>
{
// For now, just select the first match
var startIndex:int;
var stopIndex:int;
var retVal:int;
var retVector:Vector.<int> = new Vector.<int>;
retVal = findStringLoop(input, 0, dataProvider.length);
if (retVal != -1)
retVector.push(retVal);
return retVector;
}
/**
* #private
*/
function findStringLoop(str:String, startIndex:int, stopIndex:int):Number
{
// Try to find the item based on the start and stop indices.
for (startIndex; startIndex != stopIndex; startIndex++)
{
var itmStr:String = itemToLabel(dataProvider.getItemAt(startIndex));
itmStr = itmStr.substring(0, str.length);
if (str == itmStr || str.toUpperCase() == itmStr.toUpperCase())
{
return startIndex;
}
}
return -1;
}
/**
* Given a data item, return the correct text a renderer
* should display while taking the <code>labelField</code>
* and <code>labelFunction</code> properties into account.
*
* #param item A data item
*
* #return String representing the text to display for the
* data item in the renderer.
*
* #langversion 3.0
* #playerversion Flash 10
* #playerversion AIR 1.5
* #productversion Flex 4
*/
override public function itemToLabel(item:Object):String
{
if (item && item.lastName && item.firstName)
return item.lastName +","+ item.firstName;
return item[labelField];
}
]]>
</fx:Script>
</s:ComboBox>