2015-04-06 63 views
0

我正在使用Spark组合框和筛选功能筛选firstNamelastName中的字符。当用户键入“a”时,下拉列表将显示所有已过滤的项目,并在下拉列表中选择“aram,babu”,并在文本输入中显示文本为“aram,babu”。如果用户按下“r”,文本输入显示“aram,babu”,但下拉列表选择消失。点击Enter或点击鼠标下方的鼠标会导致选择错误的项目(最后一项,即“armu,babu”)。spark如果列表更改不显示组合框选择

<?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> 

回答

0

基本上组合框搜索工作的基础上的labelField,你可以看到组合框框架代码。

检查下面提到的功能: 组合框 - > processInputField(功能)

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

因此,我们需要我们的自定义callbackFunction参数分配给itemMatchingFunction(公共)

我在你的代码中做了一些修改,尝试这个,它有一些错误

<?xml version="1.0" encoding="utf-8"?> 
 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
 
\t \t \t xmlns:s="library://ns.adobe.com/flex/spark" 
 
\t \t \t xmlns:mx="library://ns.adobe.com/flex/mx" click="clickHandler(event)"> 
 
\t <fx:Script> 
 
\t \t <![CDATA[ 
 
\t \t \t import mx.collections.ArrayCollection; 
 
\t \t \t import mx.collections.IList; 
 
\t \t \t 
 
\t \t \t import spark.events.TextOperationEvent; 
 
\t \t \t import spark.utils.LabelUtil; 
 
\t \t \t 
 
\t \t \t private var unfilteredDataProvider:IList; 
 
\t \t \t namespace mx_internal; 
 
\t \t \t override public function set dataProvider(value:IList):void { 
 
\t \t \t \t super.dataProvider = value; 
 
\t \t \t \t this.itemMatchingFunction = itemMatchingFunction1; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t override protected function textInput_changeHandler(event:TextOperationEvent):void { 
 
\t \t \t \t super.textInput_changeHandler(event); 
 
\t \t \t \t 
 
\t \t \t \t if (dataProvider is ArrayCollection) { 
 
\t \t \t \t \t ArrayCollection(dataProvider).filterFunction = filterMatches; 
 
\t \t \t \t \t ArrayCollection(dataProvider).refresh(); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t protected function filterMatches(item:Object):Boolean { 
 
\t \t \t \t if (item && item.lastName && item.firstName) { 
 
\t \t \t \t \t if (String(item.lastName +","+ item.firstName).toLowerCase().indexOf(textInput.text.slice(0, textInput.selectionAnchorPosition).toLowerCase()) > -1) { 
 
\t \t \t \t \t \t return true; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * @private 
 
\t \t \t */ 
 
\t \t \t // Returns an array of possible values 
 
\t \t \t private function itemMatchingFunction1(comB:ComboBox,input:String):Vector.<int> 
 
\t \t \t { 
 
\t \t \t \t // For now, just select the first match 
 
\t \t \t \t var startIndex:int; 
 
\t \t \t \t var stopIndex:int; 
 
\t \t \t \t var retVal:int; 
 
\t \t \t \t var retVector:Vector.<int> = new Vector.<int>; 
 
\t \t \t \t retVal = findStringLoop(input, 0, dataProvider.length); 
 
\t \t \t \t if (retVal != -1) 
 
\t \t \t \t \t retVector.push(retVal); 
 
\t \t \t \t return retVector; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * @private 
 
\t \t \t */ 
 
\t \t \t function findStringLoop(str:String, startIndex:int, stopIndex:int):Number 
 
\t \t \t { 
 
\t \t \t \t // Try to find the item based on the start and stop indices. 
 
\t \t \t \t for (startIndex; startIndex != stopIndex; startIndex++) 
 
\t \t \t \t { 
 
\t \t \t \t \t var itmStr:String = itemToLabel(dataProvider.getItemAt(startIndex)); 
 
\t \t \t \t \t 
 
\t \t \t \t \t itmStr = itmStr.substring(0, str.length); 
 
\t \t \t \t \t if (str == itmStr || str.toUpperCase() == itmStr.toUpperCase()) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t return startIndex; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t return -1; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * Given a data item, return the correct text a renderer 
 
\t \t \t * should display while taking the <code>labelField</code> 
 
\t \t \t * and <code>labelFunction</code> properties into account. 
 
\t \t \t * 
 
\t \t \t * @param item A data item 
 
\t \t \t * 
 
\t \t \t * @return String representing the text to display for the 
 
\t \t \t * data item in the renderer. 
 
\t \t \t * 
 
\t \t \t * @langversion 3.0 
 
\t \t \t * @playerversion Flash 10 
 
\t \t \t * @playerversion AIR 1.5 
 
\t \t \t * @productversion Flex 4 
 
\t \t \t */ 
 
\t \t \t override public function itemToLabel(item:Object):String 
 
\t \t \t { 
 
\t \t \t \t if (item && item.lastName && item.firstName) 
 
\t \t \t \t \t return item.lastName +","+ item.firstName; 
 
\t \t \t \t 
 
\t \t \t \t return item[labelField]; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t ]]> 
 
\t </fx:Script> 
 
</s:ComboBox>

相关问题