基於用戶輸入過濾數據提供者的自定義Flex組合框

Question

我有一個ComboBox，數據提供者是一個包含3個值的ArrayCollection：CA - 加利福尼亞州，紐約州 - 紐約州，德克薩斯州 - 德克薩斯州。使用默認行爲當我開始在ComboBox中輸入時，它會嘗試匹配字符串開始處的值，所以如果我開始輸入TX，它將調出TX - Texas。

我希望能夠在字符串的任何部分進行搜索，而不僅僅是從頭開始，所以如果我輸入「xas」，它會過濾出所選內容並僅顯示TX - Texas。在Adobe論壇here中有一個非常有用的帖子，通過更改ArrayCollection上的過濾器函數來爲ComboBox提供數據，並且我已經調整了它，但是我遇到了一些小問題。

如果用戶選擇一個值然後嘗試輸入新文本，則ComboBox中鍵入的第一個字母不會顯示。

1）選擇價值CA - 在ComboBox
2加利福尼亞州）突出顯示文本，然後按「N」鍵盤上
3）您希望看到的文本框中填入「N」，但文本框遺蹟空

什麼可能導致此問題？只有當你已經選擇了一個值時纔會發生。如果您從空白組合框開始，則按預期工作。

<fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     import mx.events.FlexEvent; 

     import spark.events.TextOperationEvent; 

     [Bindable] 
     public var arrC:ArrayCollection = new ArrayCollection([{label:'CA - California'},{label:'NY - New York'},{label:'TX - Texas'}]); 

     private function changeHandler(e:*):void 
     { 
      if (arrC.filterFunction != doFilter) 
       arrC.filterFunction = doFilter; 
      arrC.refresh(); 
     } 

     private function doFilter(item:Object):Boolean 
     { 
      if(String(item.label).toLowerCase().indexOf(cb.textInput.text.slice(0 ,cb.textInput.selectionAnchorPosition).toLowerCase())>-1)    
      { 
       return true; 
      } 
      return false; 
     }      

     protected function application1_creationCompleteHandler(event:FlexEvent):void 
     { 
      cb.textInput.addEventListener(TextOperationEvent.CHANGE,changeHandler); 
     } 

    ]]> 
</fx:Script> 

<s:ComboBox id="cb" dataProvider="{arrC}"/> 

Answer 1

針對您的問題得到了解決方案（因爲我必須制定一個類似於Google搜索輸入框的自定義組件）。似乎正常的輸入處理通過過濾數據提供者而進入錯誤的方式。然而，我並沒有仔細檢查意外行爲的來源，以提供解決造成問題的解決方案（可能的解決方案的想法太快了）。）。那就是：

<?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" 
     skinClass="CGoogleComboSkin"> 
<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 is String) { 
       if(String(item).toLowerCase().indexOf(
        textInput.text.slice(0, 
         textInput.selectionAnchorPosition).toLowerCase())>-1) 
        return true; 
      } 
      else if (labelField && labelField!= "") { 
       if(item.hasOwnProperty(labelField) && 
         String(item[labelField]).toLowerCase().indexOf(
         textInput.text.slice(0, 
         textInput.selectionAnchorPosition).toLowerCase())>-1) 
        return true; 
      } 

      return false; 
     } 
    ]]> 
</fx:Script> 
<fx:Declarations> 
</fx:Declarations> 

這一解決方案背後的想法是構建由繼承自定義組合框，並覆蓋的dataProvider二傳手的方式通過任何textoperation有未經過濾的數據提供程序爲不變源，但讓flex組合框以通常的方式處理沒有附加過濾器的集合（這是通過對源集合進行過濾的任何輸入）。這只是一個嘗試，但工作，因爲我很欣賞它的速度適用。）

編碼快樂