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 
    }

但我不知道如何将其与我的代码相匹配。有人可以帮我弄清楚这将如何与我的代码一起使用。当我按下向下箭头时，我希望突出显示的结果在按下向上箭头时向下移动一个并向上移动。这是我的代码：

   </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 回答