整理自：http://www.cnblogs.com/linjiqin/archive/2011/03/18/1988464.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>struts2</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

//数据源，json的格式.

var user=[{"id": 1, "name": "张三","age":"25"},

{"id": 2, "name": "李四","age":"35"},

{"id": 3, "name": "王五","age":"20"},

{"id": 4, "name": "老王","age":"20"},

{"id": 5, "name": "老张","age":"25"},

{"id": 6, "name": "李四","age":"35"},

{"id": 7, "name": "王五","age":"20"},

{"id": 8, "name": "老王","age":"20"},

{"id": 9, "name": "abc","age":"25"},

{"id": 10, "name": "李b四","age":"35"},

{"id": 11, "name": "125","age":"20"},

{"id": 12, "name": "246","age":"20"},

{"id": 13, "name": "张三","age":"25"},

{"id": 14, "name": "李四","age":"35"},

{"id": 15, "name": "王五","age":"20"},

{"id": 16, "name": "老王","age":"20"},

{"id": 17, "name": "张三","age":"25"},

{"id": 18, "name": "李四","age":"35"},

{"id": 19, "name": "王五","age":"20"},

{"id": 20, "name": "老王","age":"20"}];

$(document).ready(function(){

        var seach=$("#seach");

        seach.keyup(function(event){

            //var keyEvent=event || window.event;

            //var keyCode=keyEvent.keyCode;

            // 数字键：48-57

            // 字母键：65-90

            // 删除键：8

            // 后删除键：46

            // 退格键：32

            // enter键：13

            //if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){

            //获取当前文本框的值

            var seachText=$("#seach").val();

            if(seachText!=""){

            //构造显示页面

            var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";

            //遍历解析json

            $.each(user,function(id, item){

                //如果包含则为table赋值

                if(item.name.indexOf(seachText)!=-1){

                tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>";

                }

                })

            tab+="</table>";

            $("#div").html(tab);

            //重新覆盖掉，不然会追加

            tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";

            }else{

                $("#div").html("");

            }

            // }

        })

});

</script>

</head>

<body>

名字：<input id="seach" />

<br/><br/>

<div id="div"></div>

</body>

</html>

一种 jquery 检索方案的更多相关文章

  1. 正确修改MySQL最大连接数的三种好用方案

    以下的文章主要介绍的是正确修改MySQL最大连接数的三种好用方案,我们大家都知道MySQL数据库在安装完之后,默认的MySQL数据库,其最大连接数为100,一般流量稍微大一点的论坛或网站这个连接数是远 ...

  2. 从零开始学习jQuery (八) 插播:jQuery实施方案

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播,  用于介绍我在本公司的j ...

  3. 最经常使用的两种C++序列化方案的使用心得（protobuf和boost serialization）

    导读 1. 什么是序列化? 2. 为什么要序列化?优点在哪里? 3. C++对象序列化的四种方法 4. 最经常使用的两种序列化方案使用心得 正文 1. 什么是序列化? 程序猿在编写应用程序的时候往往须 ...

  4. 最常用的两种C++序列化方案的使用心得（protobuf和boost serialization）

    导读 1. 什么是序列化? 2. 为什么要序列化?好处在哪里? 3. C++对象序列化的四种方法 4. 最常用的两种序列化方案使用心得 正文 1. 什么是序列化? 程序员在编写应用程序的时候往往需要将 ...

  5. OAuth2 RFC 6749 规范提供的四种基本认证方案

    OAuth2 RFC 6749 规范提供了四种基本认证方案,以下针对这四种认证方案以及它们在本实现中的使用方式进行分别说面. 第一种认证方式: Authorization Code Grant (授权 ...

  6. Python几种并发实现方案的性能比较

    http://blog.csdn.net/permike/article/details/54846831 Python几种并发实现方案的性能比较 2017-02-03 14:33 1541人阅读 评 ...

  7. objc单例的两种安全实现方案

    所有转出博客园,请您注明出处:http://www.cnblogs.com/xiaobajiu/p/4122034.html objc的单例的两种安全实现方案 首先应该知道单例的实现有两大类,一个是懒 ...

  8. SSO的几种跨域方案

    在此只是记录一下自己在尝试SSO跨域实现的过程中学到的几种跨域方案,不包含任何例子和具体的实现方法. 最近在尝试SSO的跨域,看了好多资料,然后自己记录了一下可以实现的方法: ①跳转所有站点设置coo ...

  9. 3种jQuery弹出大图效果

    本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. 拓扑排序（附LeetCode题目）

    算法期中考到一题关于拓扑序的题目,觉得很值得一写. 1.什么是拓扑序? 对一个有向无环图进行拓扑排序,假如图中存在一条从顶点A到顶点B的路径,则拓扑序中顶点A出现在顶点B的前面.要注意的是,这是对有向 ...

  2. CentOS6升级Apache-httpd2.4.29

    本文档解决AppacheHttp由版本2.2.x升级到版本2.4.29的问题,安装需要先进行依赖软件包的安装,请检查相应依赖软件包安装情况,如系统已经正确安装相应依赖软件包,可略过,本文所述版本升级不 ...

  3. jQuery幻灯片播放器插件

    在线演示 本地下载

  4. socket IPC(本地套接字 domain)

    1.简介 socket API原本是为网络通讯设计的,但后来在socket的框架上发展出一种IPC机制,就是UNIX Domain Socket.虽然网络socket也可用于同一台主机的进程间通讯(通 ...

  5. gulp前端构建工具的搭建

    我的机器: 3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux 1 ...

  6. tp添加分页

    //分页开始 $count=M('article')->where($condition)->count(); $p = intval($p) > 0 ? $p : 1; $page ...

  7. 利用正则提取discuz的正文内容

    源正文: [p=24, null, left][color=#000][font=宋体]近日,香港著名漫画家马荣成在香港举办的"[color=#ff660][url=http://cul.c ...

  8. 服务器状态监控之snmp&ipmi

    一.ipmi 1.简介 IPMI(Intelligent Platform Management Interface)即智能平台管理接口是使硬件管理具备"智能化"的新一代通用接口标 ...

  9. mapreduce&GFS&bigtable learning

    之前在学习udf的时候接触到了mapreduce,感觉很酷,于是学习了一下,看了mapreduce和GFS的论文,但是没有总结,只是看了一遍 准备利用在学校的时间,学习一下bigtable,然后再认真 ...

  10. DPDK在OpenStack中的实现

    随着云计算与大数据的快速发展,其对数据中心网络的性能和管理提出了更高的要求,但传统云计算架构存在多个I/O瓶颈,由于云平台基本上是采用传统的X86服务器加上虚拟化方式组建,随着40G.100G高速网卡 ...