キーボードでmd-selectの項目を選択する

Question

私はaugular/material2 md-selectを使用しています。私がmd-selectコンポーネントにタブすると、上下の矢印を使って項目を選択できます。スペースバーを押してリストを表示し、上下矢印とEnterキーを使って項目を選択することもできます。私ができないことは、アイテムの最初の文字を押し、そのアイテムを選択させることです。

https://material.angular.io/components/component/selectの例を使用すると、md-selectコンポーネントにタブで移動してPキーを押してピザを選択できることが期待されます。これはサポートされていませんか？回避策はありますか？材料docに

Answer 1

おかげで、唯一の次のキーボード相互作用がサポートされています。

• DOWN_ARROW：フォーカス次のオプション
• UP_ARROW：ENTERまたはSPACE
• 前のオプションをフォーカス：フォーカスがあるアイテム
を選択します

'の機能は、アイテムの最初の文字その項目を選択しておくことは、予測が困難であるため、実装するのが難しいため、リスト内に同じ最初の文字を持つ項目がいくつあるのでしょうか。リストにPIZZA、POPCORN、PASTAの項目がある場合、どの項目を 'P'を押して選択する必要がありますか？

文字を押して項目をフィルタリングすることを考えている場合は、md-autocomplteを見たいと思うかもしれません。ここで

https://material.angular.io/components/component/autocomplete

Answer 2

それはもはやデフォルトの実装として動作しますので、私はこのケースを処理するために書いていないクラスがあります。

class FindValue { 
    lastIndex: number = -1; 

    constructor(private _toString?: Function) { 
    } 

    findIndex(values, startIndex, char) { 
     for (let ii = startIndex; ii < values.length; ii++) { 
      let value; 
      if (this._toString) { 
       value = this._toString(values[ii]); 
      } else { 
       value = values[ii]; 
      } 
      if (value && value.toLowerCase().startsWith(char)) { 
       return ii; 
      } 
     } 
     return -1; 
    } 

    find(values, char) { 
     let value; 
     let index = this.findIndex(values, this.lastIndex + 1, char); 
     if (index < 0 && this.lastIndex >= 0) { 
      index = this.findIndex(values, 0, char); 
     } 

     if (index >= 0) { 
      this.lastIndex = index; 
      return values[index]; 
     } 

     return null; 
    } 
} 

私はmat-selectコンポーネントに(keypress)="selectKeyPress($event)"を追加した場合、私はこのようなものを実装しています。

constructor() { 
    this.findValue = new FindValue(value => value.name); 
} 

selectKeyPress($event) { 
    var inp = String.fromCharCode($event.keyCode); 
    if (/[a-zA-Z]/.test(inp)) { 
     let value = this.findValue.find(this.values, inp); 
     if (value) { 
      // Set the ngModel value to this value. 
     } 
    } 
} 

ように最後に見つかったインデックスの状態を保持するオブジェクト、それはあなたが連続して同じ文字を押して、それがある場合は、最初に再び集まってくる場合には、押された文字で始まるすべての項目を循環最後のもの私のオブジェクトには、選択ボックスに表示するために使用する名前属性がありました。文字列オブジェクトだけの場合は、コンストラクタ呼び出しでその関数を省略することができます。