首页 > PHP资讯 > HTML5培训技术 > 基于jQuery实现动态搜索显示功能_jquery

基于jQuery实现动态搜索显示功能_jquery

HTML5培训技术
本文实例使用jQuery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法,供大家参考,具体内容如下

模拟效果如下:

情况1:

情况2:

实现代码:

<%@ page language="java" pageEncoding="UTF-8"%>  struts2    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.1.js?1.1.9">《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="";     //遍历解析json     $.each(user,function(id, item){      //如果包含则为table赋值      if(item.name.indexOf(seachText)!=-1){      tab+="";      }     })     tab+="
编号名称年龄
"+item.id+""+item.name+""+item.age+"
"; $("#p").html(tab); //重新覆盖掉,不然会追加 tab=""; }else{ $("#p").html(""); } // } }) }); 《script》 名字:

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文由欣才IT学院整理发布,未经许可,禁止转载。
编号名称年龄