jQuery实现web页面固定列表搜索

1.需求分析：现在有一个数据展示列表页面，列表内容固定，使用jQuery在固定的列表中实现搜索功能。

2.核心代码：

<!-- 添加jquery库 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- js代码,固定列表搜索功能 -->
<script type="text/javascript">
$(function(){
$("input.soso-search-submit").click(function(){
//获取搜索框内容,正则表达式去掉所有空格
var $str = $("input#searchId").val().replace(/\s+/g, "");
//获取所有帖子标签元素li
var $lis = $("ul#tiezi-list li");
//若输入空值,则显示所有
if($str.length == 0){
$lis.show(500);
}else{
//索引i从0开始
$lis.each(function(i){
//获取当前li的标题文字
var $titleVal = $(this).find("span.title").text();
if($titleVal.indexOf($str) < 0){
$(this).hide(500);
}else{
$(this).show(500);
}
});
}
});
})
</script>

3.效果演示地址：http://xinke.org.cn/web/fixed-list-search.html

 

　　

转载于:https://www.cnblogs.com/itxinke/p/7354138.html