0

私は jQuery の初心者で、自分の Web サイトの自動提案ボックスを構築していました。次の HTML を使用しました。

<input type="text" name="suggest" class="autosuggest1">
<div class="dropdown">
  <ul class="result1">
  </ul>
</div>

次のjQueryコードを使用して、外出先でulリストに要素を追加しました:-

$(document).ready(function () {
    $('.autosuggest1').keyup(function () {
        var search_term = $(this).val();
        $.post("search.php", {
                search_term: search_term
            }, function (data) {
                $('.result1').html(data);
                $('.result1 li').click(function () {
                    var result = $(this).text();
                    $('.autosuggest1').val(result);
                    $('.result1').html('');
                });
            });
    });
});

私の問題は、要素をクリックするだけで要素が選択され、キーボードの矢印キーでも選択できるようにすることです。方法がわかりません。

4

3 に答える 3

0

jQuery UI の autocompleteを使用してみませんか? これを選択する理由:

  • 必要なすべての機能が付属しています。あなたの場合、既に存在するキーボードのように結果を制御する必要があります。
  • 車輪を再発明しないでください。オートコンプリートは何年にもわたって開発されてきたものであり、そのウィジェットをゼロから再構築することで時間を無駄にすることになります。

次のようなテキスト ボックスでオートコンプリートを初期化します。

$("#city").autocomplete(options)

ここにデモがあります：http://jsfiddle.net/hungerpain/FqqxY/

任意の都市名を入力して、自分で確認してください:)

于 2013-06-09T17:42:02.737 に答える
0

オートコンプリートを使用して@passionateCodersの回答に完全に同意しますが、あなたが尋ねた方法でそれを行う必要がある場合は、このフィドルが役立ちます(同様の質問に対するSOの回答から適応)。

JSFiddle

<input type="text" name="suggest" class="autosuggest1">
<div class="dropdown">
    <ul class="result1">          
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

 <script>
 var chosen = "";
 $(document).keydown(function(e){ // 38-up, 40-down
   if (e.keyCode == 40) { 
    if(chosen === "") {
        chosen = 0;
    } else if((chosen+1) < $('li').length) {
        chosen++; 
    }
    $('li').removeClass('selected');
    $('li:eq('+chosen+')').addClass('selected');
    var result = $('li:eq('+chosen+')').text();
    $('.autosuggest1').val(result);  
    return false;
}
if (e.keyCode == 38) { 
    if(chosen === "") {
        chosen = 0;
    } else if(chosen > 0) {
        chosen--;            
    }
    $('li').removeClass('selected');
    $('li:eq('+chosen+')').addClass('selected');
    var result = $('li:eq('+chosen+')').text();
    $('.autosuggest1').val(result);  
    return false;
 }
 });
 </script>
于 2013-06-09T17:49:43.950 に答える
0

これは古い投稿です。ただし、私の要件はあなたの要件と同じであるため、今では役に立ちました。

progrock からの回答はうまくいきます。追加する必要がある唯一の項目は、キーボードの矢印キー イベントを明示的に処理するための keyup 関数のハンドルです。すでに追加しているかどうかはわかりません。

$('.autosuggest1').keyup(function () {
     if (e.keyCode == 40 || e.keyCode == 38) {return false;}
     ...
});

これをここに投稿して、他の人が同じ問題に直面した場合に役立つようにします。

于 2015-12-10T05:10:07.177 に答える