使用jquery搜索LI列表

Search LI list with jquery

本文关键字：列表 LI 搜索 jquery 使用      更新时间：2023-09-26

问候，

我在一个div中有一堆<li>项，这个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 实现的搜索功能

相关文章：