这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery 基于 xml 格式数据实现模糊查询及分页功能的方法, 涉及 jQuery 使用 ajax 技术针对 xml 格式数据的读取、模糊查询及分页显示等相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0721/329198.html