Question

我是jQuery的新手，正在为我的网站构建一个自动建议框。我使用了以下HTML：

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

我已经通过以下jQuery代码在运行中添加了元素： -

$(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('');
                });
            });
    });
});

我的问题是只通过点击它来选择元素，我希望它也可以通过键盘上的箭头键选择。我无法想象如何。

Answer 1

为什么不使用jQuery UI's autocomplete？你应该选择这个的原因：

它带有您需要的所有功能。在您的情况下，您需要控制结果，就像您已经存在的键盘一样。
请不要重新发明轮子。自动完成功能已经开发多年，您可以通过从头开始重新构建该小部件来浪费您的时间。

您可以在文本框中初始化自动填充，如下所示：

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

以下是演示：http://jsfiddle.net/hungerpain/FqqxY/

输入任何城市名称并自行检查：）

Answer 2

我绝对同意使用自动填充的@passionateCoders答案，但是如果你必须按照你要求的方式进行，那么这个小提琴应该有所帮助（从SO answer改编成类似的问题）。

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>

Answer 3

这是一篇旧帖子。但是我发现它对我来说很有帮助，因为我的要求与你的要求相同。

progrock的答案很有效。您可能必须添加的唯一附加项是keyup函数中的句柄，以显式处理Keyboard箭头键事件。不确定你是否已经添加它。

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

如果他们遇到同样的问题，请在此处发布，以便其他人可以使用。

通过箭头键选择自动提示

3 个答案: