JavaScript前端页面搜索功能案例【基于jQuery】
本文实例讲述了JavaScript前端页面搜索功能。分享给大家供大家参考，具体如下：
今天给大家分享一篇关于前端页面搜索的案例，有了这个案例，在表格数据中可以进行快速查找，比在浏览器中使用ctrl+F体验比较好。
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面搜索实例</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
table{
width:400px;
border:1px solid blue;
border-collapse: collapse;
}
table th{
height:30px;
border:1px solid blue;
text-align: center;
}
table td{
height:30px;
border:1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13111112222</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>13233334444</td>
</tr>
<tr>
<td>移动充值</td>
<td>女</td>
<td>10086</td>
</tr>
<tr>
<td>联通充值</td>
<td>女</td>
<td>10010</td>
</tr>
</table>
<div style="width:100%;height:20px"></div>
<div>
<input type="text" name="" id="">
<input type="button" value="搜索">
</div>
</body>
<script>
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('table tr').not(':first').hide().filter(':contains("'+text+'")').show();
});
</script>
</html>
代码比较简单，首先给button按钮添加单击事件，然后获取文本框中的内容，再从表格中tr进行查找，首先把表头的tr过滤掉，然后把其他的tr全部隐藏掉，然后按照内容进行过滤，把过滤出来的行显示出来。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
注：另外，本站如下几款在线工具也具有前端页面搜索功能，且功能更加强大：
php在线函数参考表：
http://tools.jb51.net/table/php_fun_table
全国少数民族分布在线查询工具：
http://tools.jb51.net/bianmin/minzufenbu
世界节日在线查询工具：
http://tools.jb51.net/bianmin/jieri
世界各国区号代码及时差查询表：
http://tools.jb51.net/bianmin/shicha
世界各国/地区货币查询表：
http://tools.jb51.net/bianmin/huobi
世界各国首都查询表：
http://tools.jb51.net/bianmin/shoudu
更多关于jQuery相关内容可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery下拉美化搜索表单效果代码分享
本文实例讲述了jQuery下拉美化搜索表单效果.分享给大家供大家参考.具体如下: JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单,样式已写好,需要的朋友改一下就可以用了. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery下拉美化搜索表单效果代码如下 <head> <meta http-equiv="Content-Type"
-
基于jQuery实现页面搜索功能
jQuery实现页面搜索,搜索筛选用户输入的内容! HTML: <div class="table"> <table> <tr id="theader"> <th>姓名</th> <th>性别</th> <th>联系方式</th> </tr> <tr> <td>客服</td> <td>女</td
-
基于jquery的页面划词搜索JS
基于Jquery修改,以下为全部脚本 复制代码 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('Google搜索已关闭'); } else { GLS.allow = true; alert('Google搜索已打开'); } }; GLS
-
JQuery+JS实现仿百度搜索结果中关键字变色效果
1.源码 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); function setHeightKeyWord(id, keyword
-
jQuery Jsonp跨域模拟搜索引擎
效果还不错 就差加上键盘控制了... 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>迷糊网罗</title> <style type="text/css"> * { margin: 0; padding: 0; } form { position: absolute; left: 50%; to
-
jquery+json实现的搜索加分页效果
1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单,只是用了javascript 的index 函数核心代码: 复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj;
-
jquery中用jsonp实现搜索框功能
前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面的方法并不能获取到我想要的效果.无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面).今天想彻底把这个问题搞明白. 用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频.自己之前的代码找不到了,之前最先的想法也是来自那里,所以这次直
-
jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自
-
jQuery实现搜索页面关键字的功能
在一篇文章中查找关键字,找到后高亮显示. 具体代码: <html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <bo
-
jQuery UI仿淘宝搜索下拉列表功能
jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=
-
jquery 表格排序、实时搜索表格内容(附图)
复制代码 代码如下: <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th>