Question

问候，

我在div中有一堆<li>项，div是可滚动的

我想有一个文本框，用于标记包含文本框和搜索按钮中某个文本的第一个li。

并且li应该变得可见:(

我不知道如何做到这一点:(

Answer 1

<强>标记

<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});
});

Answer 2

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

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

Answer 3

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
});

Answer 4

我正在寻找类似的东西：

我网站的访问者应该能够在可点击的位置列表中搜索（针对当地天气预报）。

理想情况下，应该有匹配机制：

当访问者开始输入位置名称时，应在搜索字段中自动建议该名称。

有这样的代码吗？

Answer 5

请查看https://github.com/svapreddy/cssListJS。

使用纯CSS和一点点JS

实现的搜索功能

使用jquery搜索LI列表

5 个答案: