整理自：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. 软件测试工程师的Linux之路（持续更新修正）

    软件测试工程师成长必经之路—Linux学习. 测试工程师不同于运维工程师,所以在对不熟悉Linux的测试人员来说,先了解一些Linux系统的基本操作,能顺利开展测试工作即可,在强迫自己使用,熟悉命令行 ...

  2. [Cannot deserialize JSON array into type] NewtonSoft.Json解析数据出错原因

    今天用NewtonSoft.JSon解析一个天气数据,数据格式如: {"status":1,"detail":"\u6570\u636e\u83b7\ ...

  3. C#中各种数据类型可以表示的数据的范围

    C#中各种数据类型可以表示的数据的范围 BOOL型为int型,一般认为占4个字节,取值TRUE/FALSE/ERROR. sbyte型为有符号8位整数,占1个字节,取值范围在-128 - 127之间. ...

  4. 存储库之mongodb，redis，mysql

    一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性 ...

  5. 抗DDOS攻击

    2016年10月的某天,“半个美国互联网”都瘫痪了,就是因为遭受了DDoS攻击——Twitter.GitHub.Spotify.Airbnb.Etsy等大量站点都因此受到影响.DNS服务提供商Dyn公 ...

  6. Spring_通过注解配置 Bean(2)

  7. coredump调试小结

    在已经启动的进程中使用gdb,用gdb attach 查看so文件中的函数列表 nm -D *.so 关于c.c++类的gdb调试,强烈推荐一本书:debug hack

  8. JNI简单HelloWorld

    1.编写Java代码 建立hello目录,编写HelloWorld.java: class HelloWorld { public native void displayHelloWorld(); s ...

  9. mysql数据库优化课程---10、mysql数据库分组聚合

    mysql数据库优化课程---10.mysql数据库分组聚合 一.总结 一句话总结:select concat(class,' 班') 班级,concat(count(*),' 人') 人数 from ...

  10. Netty(RPC高性能之道)原理剖析

    1,Netty简述 Netty 是一个基于 JAVA NIO 类库的异步通信框架,用于创建异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性的网络客户端和服务器端 RPC高性能分析,请参考文章“[ ...