1

自動提案ボックスで矢印キーを機能させる方法がわかりません。コードに次のようなものを追加する必要があることはわかっています。

    var keynum = 0; 
    if(window.event) { keynum = e.keyCode; }  // IE  
    else if(e.which) { keynum = e.which; }    // Netscape/Firefox/Opera 
    if(keynum === 38) { // up 
    //Move selection up 
    } 
    if(keynum === 40) { // down 
    //Move selection down 
    } 
    if(keynum === 13) { // enter 
    //Act on current selection 
    }

しかし、それを自分のコードに合わせる方法がわかりません。誰かがこれが私のコードでどのようになるかを理解するのを手伝ってくれますか? 下矢印を押すと、強調表示された結果が1つ下に移動し、上矢印が押されると上に移動します。私のコードは次のとおりです。

   </ul>

<div class="input-wrapper">
<input type="text" class="autosuggest" value="Type in a city or town" onblur="onBlur (this)" onfocus="onFocus(this)" > <input type="submit" value="Search">

<div class="dropdown">
    <ul class="result"></ul>


</div>
</div>

      $(document).ready(function() {
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');

$.post('php/search.php', { search_term: search_term }, function(data) {
    $('.result').html(data);

$('.result li').click(function(){
    var result_value = $(this).text();
    $('.autosuggest').attr('value', result_value);
    $('.result').html('');

    });

    });

});
      });
       function onBlur(el) { 
if (el.value == '') { 
    el.value = el.defaultValue; 
} 
} 
 function onFocus(el) { 
if (el.value == el.defaultValue) { 
    el.value = ''; 
} 
}
4

1 に答える 1

0

すでに jQuery を使用していることに気付きました。可能であれば、jquery-ui ライブラリは、必要なキーボード機能を既に提供しています。ajax データソースを含みます。ここでjQuery-ui デモに「j」と入力し、矢印キーを使用します。次に、ドキュメントを見て、ajax の投稿を取り込みます。

サンプルjs

$(function(){
  $(".autosuggest").autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "/php/searchToJSON.php",
                    dataType: "json",
                    data: {
                        search_term: request.term
                    },
                    success: function( data ) {
//this maps your serverside /searchToJSON.php to the {label:something, value:somethingElseMaybe} that jquery-ui autocomplete needs
                        response( $.map( data.SomeNameYouPick, function( itemWithinSomeNameYouPick ) {
                            return {
                                label: itemWithinSomeNameYouPick.labelToShowForOneItem,
                                value: itemWithinSomeNameYouPick.valueWhenSelectedForOneItem
                            }
                        }));
                    }
                });
            },
            minLength: 2
  });
});
于 2012-09-30T23:49:42.837 に答える