整理自：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. Python3：文件读写

    Python3:文件读写 open f = open('filename','r') # 读模式 f = open('filename','w') # 写模式 f = open('filename', ...

  2. [pixhawk笔记]2-飞行模式

    本文翻译自px4官方开发文档:https://dev.px4.io/en/concept/flight_modes.html  ,有不对之处,敬请指正. pixhawk的飞行模式如下: MANUAL( ...

  3. C++中的内存区[译文]

    C++ 中的内存区 Const Data: The const data area stores string literals and other data whose values are kno ...

  4. 高亮显示QSS文件

    转[作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820] 简述 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示 ...

  5. Jave基础之选择排序

    选择排序(Selection sort) 基本介绍 选择排序: 每一次从未排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,然后再从剩余未排序的元素中选出最小(或最大的)放在已排序序 ...

  6. 用WAR的方式部署SpringBoot项目

    接SpringBoot 快速入门(Eclipse) 步骤一:部署方式 Springboot 和 web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢? 通常来说,Springb ...

  7. hibernate配置文件的详解

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE hibernate-configurati ...

  8. eclipse官网下载

    Provided by IBM Cloud Eclipse IDE for Java Developers http://eclipse.bluemix.net/packages/photon/dat ...

  9. Codeforces Round #447 (Div. 2) C　构造

    现在有一个长度为n的数列 n不超过4000 求出它的gcd生成set 生成方式是对<i,j> insert进去(a[i] ^ a[i+1] ... ^a[j]) i<=j 然而现在给 ...

  10. Python基础笔记系列四：工具的安装与配置

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 一开始是没有打算写工具这篇的,后来发现在某些情况下会遇到一些奇怪的问题,这 ...