키보드를 통해 입력 한 부분 문자열을 기준으로 mx : ComboBox 항목을 선택하는 방법

Question

<mx:ComboBox />을 사용 중이며 키보드를 통해 입력 한 문자열을 기준으로 일치하는 항목을 선택하고 싶습니다. 현재 <mx:ComboBox />은 첫 번째 문자 만 기반으로 첫 번째로 일치하는 항목을 선택합니다. 이 기능을 사용자 정의하고 싶습니다. 나는 그것을 대체 할 수 있도록 일치를 수행하는 KeyboardEvent 리스너를 찾을 수 없습니다.

Answer 1

이 작업을 직접 수행하려면 ComboBox 및 ListBase 클래스에서 아래의 다음 코드와 조각을 찾아야합니다. ListBase은 ComboBox 구성 요소가 드롭 다운 목록에 사용하는 것입니다.

ComboBox은 키보드 입력을 드롭 다운 목록으로 지연시키는 것으로 보입니다. 그런 다음 드롭 다운 목록의 이벤트를 수신하여 선택 사항이 변경된시기를 알 수 있습니다 (키보드 또는 마우스 입력의 결과).

일반적으로 Flex 구성 요소는 포커스가있을 때 키보드 입력을 처리하기 위해 keyDownHandler()이라는 메서드보다 우선합니다. 이부터, 우리는 ComboBox line 2231 건너 :

// Redispatch the event to the dropdown 
// and let its keyDownHandler() handle it. 

dropdown.dispatchEvent(event.clone()); 
event.stopPropagation(); 

가 이제 드롭 다운 목록에서 keyDownHandler()이 실행 얻을 것이다. 그 방법은 default case 문 on line 9197 of ListBase은 다음과 같습니다 거대한 switch 문을 가지고

default: 
{ 
    if (findKey(event.charCode)) 
     event.stopPropagation(); 
} 

드롭 다운 목록이 입력이 화살표 키가 아닌 경우 나 (키보드 입력에 따라 선택해야할지 결정하는 곳입니다 페이지 업 등). 보호 된 findKey() 메서드는 공개 findString() 메서드를 호출하여이 작업을 수행합니다.

그래서이 문제를 직접 오버라이드 (override) :

• 사용자 지정 논리와 findKey() 또는 findString() 방법을 ListBase 클래스를 확장하고 우선 당신이 당신의 정의를 인스턴스화 할 수 있도록
• 이 ComboBox 클래스를 확장하고 createChildren() 메소드를 오버라이드 (override) ListBase 클래스 대신 기본 클래스입니다.

Answer 2

다음은 작동시키기 위해 사용한 클래스입니다. searchStr은 일치해야하는 사용자 입력 문자열입니다.에 일치하는 dataprovider 항목이 없으면 재정의 된 리스너는 기본 동작으로 되돌아갑니다. 나는 Timer을 사용하여 2 초 후에 입력 된 searchStr을 플러시합니다. 가능한 단점은 dataprovider가 String 값의 집합이라고 가정한다는 것입니다. 그러나 필요에 따라 적절하게 수정할 수 있습니다.

public class CustomComboBox extends ComboBox 
    { 
     private var searchStr:String=""; 
     private var ticker:Timer; 
     public function CustomComboBox() 
     { 
      super(); 
      ticker = new Timer(2000); 
      ticker.addEventListener(TimerEvent.TIMER, resetSearchString); 
     } 

     override protected function keyDownHandler(event:KeyboardEvent):void 
     { 
      super.keyDownHandler(event); 

      // code to search items in the list based on user input. 
      // Earlier, the default behavior shows the matched items in the dropdown, based on first character only. 
      // user input is invisible to user. 
      if((event.charCode>=0x20 && event.charCode<=0x7E) || event.charCode==8)    //Range of printable characters is 0x20[space] to 0x7E[~] in ASCII. 8 is ASCII code of [backspace]. 
      { 
       ticker.reset(); 
       ticker.start(); 

       if(event.charCode==8) 
       { 
        if(searchStr=="") 
         return; 
        searchStr = searchStr.substr(0, searchStr.length-1); 
       } 
       else 
       { 
        searchStr += String.fromCharCode(event.charCode); 
        searchStr = searchStr.toLowerCase(); 
       } 
       for each(var str:String in dataProvider) 
       { 
        if(str.toLowerCase().indexOf(searchStr, 0)>-1) 
        { 
         this.selectedItem = dropdown.selectedItem = str; 
         dropdown.scrollToIndex(dropdown.selectedIndex); 

         break; 
        } 
       } 
      } 
     } 


     /** 
     * reset the search string and reset the timer. 
     **/ 
     private function resetSearchString(evt:TimerEvent):void 
     { 
      searchStr = ""; 
      ticker.reset(); 
     } 
    }