Question

我对我的网站有特殊需求，这会让我的生活和我的同事的生活变得更轻松：）

我使用我在本网站上找到的一个小脚本来过滤＆＃34; li＆＃34;在一个＆＃34; ul＆＃34;锚点，基于用户输入：

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 style =＆gt;当我输入内容时，我希望能够选择我用键盘提出的内容。

这是我使用的（修改过的）脚本的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，autocomplete

即可

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

在过滤后使用箭头键＆＃34; ul＆＃34;名单

1 个答案: