0

knockout.js行を選択する機能を備えた単純なテーブル（を使用）があります
http://jsfiddle.net/aDahT/447/

次の機能を追加したいと思います。レコードの名前の最初の文字のキーを押して行を選択します。
たとえば、ユーザーが押すbと、レコードbbbが選択されます。
ユーザーが押すhと、レコードHamが選択されます。
どうすれば実装できますか？

4

2 に答える 2

1

まず、フィドルをフォークする場合は、まず JSLint を実行します。よりクリーンで正確なコードを作成するのに役立ちます。私はこれを思いつきました: http://jsfiddle.net/a0viedo/Guf3u/。

event.timeStamp内部ハンドラーを使用keyPress()すると、ユーザーが入力しているかどうか、または新しい単語の入力を開始しているかどうかを判断できます。

(そうではない)小さな詳細に注意してください:

  • 大規模なデータのセットアップには非常に適していません。
  • 大文字と小文字を区別するセレクタ。大文字と小文字を区別しない jquery セレクターを使用する場合は、html 要素の一部の属性に項目値を設定する必要があります。
  • timeStamp 差 (750 ミリ秒) のハードコードされた値。このハードコードされた値は、入力中の 2 つのキー間のしきい値時間を反映する必要があります。

良いアイデアが得られることを願っています。

于 2012-11-06T13:17:55.690 に答える
1

ここに解決策があります：http://jsfiddle.net/VEnsz/4/

外側の要素にバインドされたデータがあります。

<div style="width: 30em; max-height: 6em; overflow-x: hidden; overflow-y: auto; border: 1px groove grey" data-bind="event: {keypress: selectByKeyPress }">

(アプリケーション内の別の要素を選択して、キー プレス イベントをアタッチすることができます)。

...そして、次の関数をモデルに追加しました:

self.selectByKeyPress = function(data, e) 
{

    var key = String.fromCharCode(e.keyCode).toLowerCase();
    var items = self.allItems();
    for (var j=0; j<items.length; j++) {
        if (items[j].toLowerCase().indexOf(key) == 0) {
            self.selectCurrent(items[j]); 
            return;
        }
    }      
}

このソリューションを多少改良する必要があるかもしれませんが、「ノックアウト」の方法に沿ったものであると感じているため、機能を構築するための優れた基盤を提供してくれることを願っています.

于 2012-11-06T13:34:55.487 に答える