jQuery基于xml格式数据实现模糊查询及分页功能的方法


Posted in Javascript onDecember 25, 2016

本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法。分享给大家供大家参考,具体如下:

1、此代码只支持xml 格式数据,根据不同需求修改ajax的success方法就ok了

2、此代码只是针对ajax只需一次请求的情况下

String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题
(function($) {
/**
 * ===============================================================================================================
 * ==========  模糊搜索功能  =================================================================================
 * ===============================================================================================================
 *
 * */
  $.xml=function(data){//加载xml
    var xmlobj=null;
    if(window.ActiveXObject){
       var xml;
      xml = new ActiveXObject("Microsoft.XMLDOM");
      xml.async = false;
      xml.loadXML(data);
      xmlobj=$(xml);
   }else{
     xmlobj=$(data);
   }
    return xmlobj;
  };
  //获取节点
  $.getnode=function(key,obj){
    var nodevalue=obj.children(key).text();
    return nodevalue;
  };
  $.xmldata=null;
  $.jsondata=null;
  $.indexdata=null;
  $.inputid=null;
  $.pagetoolid=null;
  $.resultdata=null;
  $.pagetotal=1;
  $.load=function(url){
    $.ajax({
       type: "post",
       url: url,
       dataType: "text",
       success:function(data){
         $.xmldata=$.xml(data);
         var jsonstr='{';
         var indexstr="{";
         $.xmldata.find("QUERYINFO").find("ROW").each(function(i){
           var point=i==0?"":",";
           var ZZJGDM=$.getnode("ZZJGDM",$(this));
           var JGMC=$.getnode("JGMC",$(this));
           var DWLX=$.getnode("DWLX",$(this));
           var JGJC=$.getnode("JGJC",$(this));
           var JGBH=$.getnode("JGBH",$(this));
           var ZCDZ=$.getnode("ZCDZ",$(this));
           jsonstr+=point+"'"+JGBH+"':{'ZZJGDM':'"+ZZJGDM+"','JGMC':'"+JGMC+"','JGBH':'"+JGBH+"','JGJC':'"+JGJC+"','ZCDZ':'"+ZCDZ+"','DWLX':'"+DWLX+"'}";
           indexstr+=point+"'"+JGMC+"':'"+JGBH+"'";
          });
         jsonstr+="}";
         indexstr+="}";
         $.indexdata=eval("("+indexstr+")");
         $.jsondata=eval("("+jsonstr+")");
         }});
  };
  $.select=function(obj){//选中结果中的一项时
    var id=obj.attr("id");
    $("#"+$.inputid).val($.jsondata[id].JGMC);
    $("#reg_companysimplename").val($.jsondata[id].JGJC);
    $("#reg_companysimplename_form").val($.jsondata[id].JGJC);
    $("#reg_companycode").val($.jsondata[id].ZZJGDM==""?"---":$.jsondata[id].ZZJGDM);
    $("#reg_companycode_form").val($.jsondata[id].ZZJGDM==""?"---":$.jsondata[id].ZZJGDM);
    $("#reg_companytype").val($.jsondata[id].DWLX);
    $("#reg_companytype_form").val($.jsondata[id].DWLX);
    $("#reg_jgbh").val($.jsondata[id].JGBH);
    $("#reg_regaddress").val($.jsondata[id].ZCDZ);
    $("#reg_regaddress_form").val($.jsondata[id].ZCDZ);
    $("#"+$.inputid).focus();
    $("#"+$.inputid).blur();
  };
  $.fn.search=function(obj){//程序入口
    var oldkeyword="";
    var id=obj.id;
    var url=obj.url;
    $.inputid=$(this).attr("id");
    if($.xmldata==null){
      $.load(url);
    }
    //========================================键盘事件==========================================
    $(this).keyup(function(){
      var resultlist=null;
      var keywordvalue=$(this).val().trim();
      $("#reg_companysimplename").val("");
      $("#reg_companycode").val("");
      $("#reg_companytype").val("");
      if(keywordvalue==""||oldkeyword==keywordvalue){//解决ie 的keyup 事件异常
        if(keywordvalue==""){
          $("#"+id+" ul").parent().hide();
        }
        return;
      }else{
        oldkeyword=keywordvalue;
      }
      var jsonstr='{';
      var rownum=0,pagesize=10,num=0;
      $.pagetotal=1;
      $.indexsearch($.indexdata,keywordvalue);
      resultlist=$.indexsearch($.indexdata,keywordvalue);
      var ids="[";
      for(var i in resultlist){//给查询结果分页
        var point=$.pagetotal==1?"":",";
        rownum++;
        if(rownum>=pagesize&&rownum%pagesize==0||resultlist.length==rownum){
          ids+=","+"'"+resultlist[i]+"']";
          jsonstr+=point+"'"+$.pagetotal+"':"+ids;
          ids="[";
          num=0;
          if(rownum%pagesize==0){
            $.pagetotal++;
          }
        }else{
          point=num==0?"":",";
          ids+=point+"'"+resultlist[i]+"'";
          num++;
        }
      }
      jsonstr+="}";
      $.resultdata=eval("("+jsonstr+")");
      //初始化结果列表
      if(rownum==0)return;
      var pagenum=1;
      $.pageto(pagenum,$.resultdata,$("#"+id+" ul"));
      if($.pagetotal>1){
        $.pagetool.createpagetool($.pagetotal);
        $.pagetool.pageto(pagenum,$.pagetotal);
        $("#pagetool span[pagenum='1']").css("backgroundColor",'lightblue');
      }else{
        $("#pagetool").html("");
      }
      $("#pagetool .num").click(function(){
        pagenum=eval($(this).text());
        $("#pagetool span").css("backgroundColor",'white');
        $(this).css("backgroundColor",'lightblue');
        $.pageto(pagenum,$.resultdata,$("#"+id+" ul"));
      });
      $("#pagetool .up").click(function(){
        pagenum--;
        if(pagenum!=0){
        $("#pagetool span").css("backgroundColor",'white');
        $("#pagetool span[pagenum='"+pagenum+"']").css("backgroundColor",'lightblue');
        $.pageto(pagenum,$.resultdata,$("#"+id+" ul"));
        $.pagetool.pageto(pagenum);
        }else{
          pagenum++;
        }
      });
      $("#pagetool .down").click(function(){
        pagenum++;
        if(pagenum<=$.pagetotal){
        $("#pagetool span").css("backgroundColor",'white');
        $("#pagetool span[pagenum='"+pagenum+"']").css("backgroundColor",'lightblue');
        $.pageto(pagenum,$.resultdata,$("#"+id+" ul"));
        $.pagetool.pageto(pagenum);
        }else{
          pagenum--;
        }
      });
    });
  };
  //工具栏分页
  $.pagetool = {
    createpagetool : function(pagetotal) {
      var html = "<span class='up'>up</span>";
      var pagetoolpagenum=1;
      for (var i = 1; i <= pagetotal; i++) {
        if(i%5==1&&i>5){
          pagetoolpagenum++;
        }
        html += "<span pagenum='"+i+"' i='" +pagetoolpagenum + "' class='num'>" + i
            + "</span>";
      }
      html += "<span class='down'>down</span>";
      $("#pagetool").html(html);
    },
    pageto : function(pagenum,pagetotal) {
      var pagetoolpagenum=1;
      if(pagenum>5){
        pagetoolpagenum=Math.ceil(pagenum/5);
      }
      $("#pagetool span").hide();
      $("#pagetool span:first").show();
      $("#pagetool span[i='"+pagetoolpagenum+"']").show();
      $("#pagetool span:last").show();
    }
  };
  //模糊搜索
  $.indexsearch=function(indexdata,keyword){
    var resultids=new Array();
     for (var key in $.indexdata){
       if(key.indexOf(keyword)!=-1)
         resultids.push($.indexdata[key]);
      }
     return resultids;
  };
  //跳页程序
  $.pageto=function(pagenum,data,obj){
    var list=data[pagenum];
    var html="";
    obj.html(html);
    obj.parent().show();
    $(list).each(function(i){
      try{
       html+='<li id="'+list[i]+'" >'+$.jsondata[list[i]].JGMC+'</li>';
      }catch(e){}
    });
    obj.html(html);
    obj.find("li").bind({//结果集的点击事件
        "click":function(){
        $.select($(this));
        obj.parent().hide();
        obj.parent().find("#pagetool").html("");
        },
      "mouseover":function(){//结果集的鼠标悬浮事件
        $(this).parent().find("li").css("backgroundColor","white");
        $(this).css("backgroundColor","lightblue");
      }
    });
  };
}(jQuery));

在页面中调用

<div class="item_input fl">
  <input id="reg_companyname" autocomplete="off" type="text" class="text" name="DWBM_SV"/>
  <div id="resultlist" class="hidden" style="width:300px;margin-top: 1px;display:none;">
    <ul></ul>
    <div class="pagetool" id="pagetool"></div>
    </div>
</div>
<script>
    $("#reg_companyname").search({"id":"resultlist","url":"/getcompany.go"});
</script>

运行效果 (不同的效果需要不同的样式)

jQuery基于xml格式数据实现模糊查询及分页功能的方法

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JavaScript实现区块链
Mar 14 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
浅谈es6中的元编程
Dec 01 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
You might like
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP多文件上传实例
2015/07/09 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python 如何测试文件是否存在
2020/07/31 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
工程承包协议书范本
2014/09/29 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python