使用jquery搜索LI列表

问候，

我在div中有一堆

项，div是可滚动的

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

李应该变得可见:(

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

Answer 1

现场演示通过滚动更新

标记

 
 
 
Text
 
Something
 
Hey
 
der
 
herp
 
derp
 
Testing
 
  

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：

 
 
the first li
 
the second li
 
the third li
 
the fourth li
 ... 
   

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 。

搜索function使用纯CSS和一点点JS实现