整理自：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. Mybatis${}、#{}及使用#{}时指定jdbcType

    一.Mybatis 的Mapper.xml语句中parameterType向SQL语句传参有两种方式:#{}和${} 我们经常使用的是#{},一般解说是因为这种方式可以防止SQL注入,简单的说#{}这 ...

  2. 在react-native中使用redux

    redux是什么? redux是一个用于管理js应用状态的容器.redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等.redux设计的理念很简单,似乎最初这个开发团队就有 ...

  3. Linux Shell脚本简介

    Shell 诞生于 Unix,是与 Unix/Linux 交互的工具,单独地学习 Shell 是没有意义的,请先参考Unix/Linux入门教程,了解 Unix/Lunix 基础. 近几年来,Shel ...

  4. PHP练习题三

    1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21. echo date(‘Y-m-d H:i:s’, strtotime(‘-1 days’)); 2.不使用第三个变量交换两个 ...

  5. idea技巧

    写在前面 以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊.深深的爱上了它,强大到无所不能: "工欲善其事必先利其器",IntelliJ IDEA作为一个非常 ...

  6. 基于主从复制的Mysql双机热备+amoeba实现读写分离、均衡负载

    读写分离指的是客户只能在主服务器上写,只能在从服务器上读,当然了,这也是要看配置,你可以在主服务器配置读的功能,但是在从服务器上只能读不能写,因为从服务器是基于binlog对主服务器的复制,如果在从服 ...

  7. NumPy使用 Matplotlib 绘制直方图

    NumPy - 使用 Matplotlib 绘制直方图 NumPy 有一个numpy.histogram()函数,它是数据的频率分布的图形表示. 水平尺寸相等的矩形对应于类间隔,称为bin,变量hei ...

  8. 通过application.properties配置SpringBoot项目

    application.properties可以自己新建,放在这里:(该文件可以放在4个地方,详情百度) 在文件中添加:file_path=E://Tools//apache-tomcat-9.0.1 ...

  9. MySQL5.7版本开启二进制日志是log_bin、bin-log 还是 bin_log ？

    已Mac系统为例,文件:/usr/local/mysql/support-files/my-default.cnf 是mysql的默认配置文件,你可以直接修改这个文件但是不推荐,你可以在/etc/my ...

  10. Go语言实现FastDFS分布式存储系统WebAPI网关

    前言 工作需要,第一次使用 Go 来实战项目. 需求:采用 golang 实现一个 webapi 的中转网关,将一些资源文件通过 http 协议上传至 FastDFS 分布式文件存储系统. 一.Fas ...