整理自：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. 【JavaScript】撞墙的小球

    参考: 1.JS 元素位置 设置元素位置:http://blog.sina.com.cn/s/blog_a2ec891e01011v9f.html 2.用JavaScript修改CSS属性 3.使用J ...

  2. 20145201《Java程序设计》第五次实验报告

    实验五 Java网络编程及安全 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 我负责客户端 组队队员:鄢曼君20145227负责服务器 博客地址:htt ...

  3. WIN10 安装Docker MySQL Ubuntu

    1)   必须专业版, 要开启 Hyper-V 2)下载安装包: 链接:https://pan.baidu.com/s/1APqcq2glvwzsCHlwRnPXkA 密码:wpej 3)安装时不要勾 ...

  4. Spring_使用 JdbcTemplate和JdbcDaoSupport

  5. What's the difference between UTF-8 and UTF-8 without BOM?

    https://stackoverflow.com/questions/2223882/whats-the-difference-between-utf-8-and-utf-8-without-bom ...

  6. caffe python lmdb读写

    caffe中可以采取lmdb健值数据库的方式向网络中输入数据. 所以操作lmdb就围绕"键-值"的方式访问数据库就好了. Write 我们可以采用cv2来读入自己的图像数据,采用d ...

  7. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  8. C++ dll的隐式与显式调用

    应用程序使用DLL可以采用两种方式:一种是隐式链接,另一种是显式链接.在使用DLL之前首先要知道DLL中函数的结构信息.Visual C++6.0(或者更先进的版本)在VC\bin目录下提供了一个名为 ...

  9. oracle between、 all、 in 和 exists的区别，模糊查询、4个正则表达式

    --条件比较 /* ＝,!＝,<>,<,>,<=,>=, any,some,all is null,is not null between x and y in(l ...

  10. mysql create database and user 新建数据库并为其创建专用账号

    DROP DATABASE `wordpress`;------------------------------------------------------------------ CREATE ...