用jQuery搜索LI列表

如何解决用jQuery搜索LI列表

| 问候， 我在div中有一堆of0ѭ项目，该div可滚动 我想有一个文本框来标记第一个li，其中包含来自文本框和搜索按钮的某些文本。 li应该变得可见了：( 我不知道如何做到这一点:(     

解决方法

        实时演示已通过滚动更新 标记

<div id=\'test\'>
    <ul>
         <li>Text</li>
         <li>Something</li>
         <li>Hey</li> 
         <li>der</li>
         <li>herp</li>
         <li>derp</li>
         <li>Testing</li>
    </ul>
</div>

JS

$(\'#searchBtn\').click(function(){
    var searchString = $(\'#searchText\').val(),foundLi = $(\'li:contains(\"\' + searchString + \'\")\');

    foundLi.addClass(\'found\');
    $(\'#test\').animate({ scrollTop: foundLi.offset().top});
});

    ,        我将使用scrollTo插件：http://flesler.blogspot.com/2007/10/jqueryscrollto.html 然后做这样的事情（未经测试）

$(\'#thediv\').scrollTo( $(\'li:contains(\"\'+yourtext+\'\")\') );

    ,        HTML：

<div style=\"height: 40px; overflow-y: scroll\" id=\"my_div\">
    <li>the first li</li>
    <li>the second li</li>
    <li>the third li</li>
    <li>the fourth li</li>
    ...
</div>

<input type=\"text\" id=\"my_text_box\" />
<input type=\"submit\" id=\"my_search_button\" />

JavaScript：

$(\'#my_search_button\').click(function(e) {
    var my_search = $(\'#my_text_box\').val(); // the text to search for
    var $my_div = $(\'#my_div\'); // the div
    $my_div.find(\'li\').each(function(idx,elem) {
      $elem = $(elem);
      if ($elem.text().indexOf(my_search) != -1) { // if it contains your searched text
        $elem.show(); // display it ? only if needed,unclear from question
        $elem.addClass(\'highlighted\'); // add your class for the highlight
        $my_div.scrollTop($elem.position().top); // scroll to it
        return false; // stop the loop
      }
    });

    e.preventDefault(); // stop an actual form from being submitted
});

    ,        我正在寻找类似的东西： 我网站的访问者应该可以在可点击的位置列表中进行搜索（以获取本地天气报告）。 理想情况下，应该有一个匹配机制： 当访客开始输入位置的名称时，应在搜索字段中自动建议该名称。 有没有这样的代码？     ,        查看此https://github.com/svapreddy/cssListJS。 使用纯CSS和一点点JS实现的搜索功能