在过滤的“ ul”列表上使用箭头键

Question

我对我的网站有特定的需求，这会使我和我的同事的生活更加轻松:)

我使用一个在此站点上找到的小脚本，根据用户输入过滤“ ul”锚点内的“ li”列表：

HTML：

<input placeholder="Search Me" id="box" type="text" /> 

<ul class="navList">
    <li><a href="#">apples</a></li>
    <li><a href="#">apricots</a></li>
    <li><a href="#">acai</a></li>
    <li><a href="#">blueberry</a></li>
    <li><a href="#">bananas</a></li>
    <li><a href="#">cherry</a></li>
    <li><a href="#">coconut</a></li>
    <li><a href="#">donut</a></li>
    <li><a href="#">durean</a></li>
</ul>

JS：

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();           
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});

这工作得很好，但是我非常感谢能够使用箭头键选择所需的结果，然后按Enter触发链接。 现在，我必须使用鼠标，但是我希望一切都变得顺畅便捷：）更具体地说：Google风格=>当我键入某些内容时，我希望能够选择键盘上的建议。

这是我使用的（修改后的）脚本的jSFiddle： http : //jsfiddle.net/Q83f2/115/

谢谢你的帮助 ！ 请告诉我我是否还不够清楚（对我的最终错误，英语不是我的母语，抱歉）。

Answer 1

我认为该脚本可以帮助激发灵感：

<input placeholder="Search Me" id="box" type="text" /> 

<ul class="navList">
    <li><a href="#">apples </a></li> //note the space after any words
    <li><a href="#">apricots </a></li>
    <li><a href="#">acai </a></li>
    <li><a href="#">blueberry </a></li>
    <li><a href="#">bananas </a></li>
    <li><a href="#">cherry </a></li>
    <li><a href="#">coconut </a></li>
    <li><a href="#">donut </a></li>
    <li><a href="#">durean </a></li>
</ul>

只需添加库jQuery ui，即可自动完成

var g=$('a[href="#"]').text();
    var array=g.split(' ');
    $( "#box" ).autocomplete({
      source: array,
        change: function() {
            var sel=$('#box').val();
            if (sel.length == 0){
                $('li').removeAttr('style');
            }
            else{
            $('li:not(:contains("'+sel+' "))').attr('style','display:none;');
            }
        }
    });

下载该库并将其插入http://jqueryui.com