9

次の HTML 構造があります (「ul li」はドロップダウン/選択としてレンダリングされます)

<input id="input_city" type="text" />

<div class="suggestions">
 <ul>
  <li value="0" name="New York">New York</li>
  <li value="1" name="London">London</li>
  <li value="2" name="Paris">Paris</li>
  <li value="3" name="Sydney">Sydney</li>
 </ul>
</div>

最初の「li」要素を選択する下矢印キーの押下イベント (入力時) をキャプチャするには、JavaScript/jQuery コードが必要です。

連続した下キーは、次の 'li' 要素を選択します。上キーで前の 'li' 要素を選択します。

4

2 に答える 2

25

あなたの質問は少し漠然としているので、何を達成しようとしているのか正確にはわかりません。

li要素を強調表示しようとしている場合は、これを使用します。

var $listItems = $('li');

$('input').keydown(function(e) {
    var key = e.keyCode;
    var $selected = $listItems.filter('.selected');
    var $current;

    if (![38, 40].includes(key)) return;

    $listItems.removeClass('selected');

    if (key == 40) { // Down key
        if (!$selected.length || $selected.is(':last-child')) {
            $current = $listItems.eq(0);
        } else {
            $current = $selected.next();
        }
    } else if (key == 38) { // Up key
        if (!$selected.length || $selected.is(':first-child')) {
            $current = $listItems.last();
        } else {
            $current = $selected.prev();
        }
    }

    $current.addClass('selected');
});​

これがフィドルです：http://jsfiddle.net/GSKpT/

フィールドの値を設定しようとしているだけの場合はinput、最後の行を次のように変更します。

$(this).val($current.addClass('selected').text());

これがフィドルです：http://jsfiddle.net/GSKpT/1/

于 2012-07-09T17:53:31.330 に答える
0

これにはMousetrapJSを使用できます。ここでは、ダウンキーを実装する方法の例を示します。まず、選択したクラスを最初のリスト項目に追加します。

Mousetrap.bind('down', function() {
    var next = $(".suggestions  li.selected").removeClass("selected").next();
    if (next.length) {
       next.addClass("selected");
    } else {
       $(".suggestions li").first().addClass("selected");
    }
});
于 2012-07-09T17:49:57.213 に答える