jquery - 通过箭头键自动建议选择

Question

我是 jQuery 的新手，正在为我的网站构建一个自动建议框。我使用了以下 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('');
                });
            });
    });
});

我的问题是该元素只能通过单击它来选择，我希望它也可以通过键盘上的箭头键来选择。我不知道怎么做。

Answer 1

为什么不使用jQuery UI 的自动完成功能？你应该选择这个的原因：

• 它具有您将需要的所有功能。在您的情况下，您需要像使用已经存在的键盘一样控制结果。
• 请不要重新发明轮子。自动完成功能已经开发了很多年，从头开始重新构建该小部件会浪费您的时间。

您将在这样的文本框上初始化自动完成：

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

这是一个演示：http: //jsfiddle.net/hungerpain/FqqxY/

输入任何城市名称并自行检查:)

Answer 2

我绝对同意@passionateCoders 使用自动完成的回答，但如果你必须按照你要求的方式去做，那么这个 Fiddle 应该会有所帮助（改编自SO answer to a similar question）。

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 函数中的句柄，以显式处理键盘箭头键事件。不确定您是否已经添加了它。

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

在此处发布此内容，以便其他人在遇到相同问题时使用它可能会有所帮助。