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
最新文章
- C#使用Log4Net记录日志
- javascript DOM操作
- jqGrid的选中行事件
- nodejs高大上的部署方式-PM2
- JS form表单图片上传
- C# Web Forms - Using jQuery FullCalendar
- python中的面向对象编程
- C#的157个建议--读书笔记(一)
- (转)内网网站发布到外网-nat123动态公网IP动态域名解析
- 深入理解计算机系统第二版习题解答CSAPP 2.18
- ajax跨域请求的解决方案
- AngularJS中的控制器示例_2
- css元素水平垂直居中的十种方法
- 《安卓网络编程》之第六篇 Android中的WIFI和蓝牙
- A session had already been started – ignoring session_start() 怎么办?
- ELF 文件 动态连接 - 延迟绑定(PLT)
- Python Day5 模块 包
- javascript 多个onclick function 取对应值
- [Codeforces797F]Mice and Holes
- 使用Spire.Office for .NET(Word、Excel、PPT、PDF等)的初步感受