JQuery插件第十八个:高级搜索集成处理

来源：互联网发布：没谈过恋爱的女生知乎编辑：程序博客网时间：2024/05/22 17:34

 (function($) {    $.fn.AdvSearch = function(options) {        var defaults = {            searchbtn: "", //搜索按钮, 输入Jquery选择器名称            showSearchbtn: "", //显示或隐藏搜索区域的按钮, 输入Jquery选择器名称            cookieName: "",            otherUrl: "" //跳转链接和搜索表单没关系的URL参数 例如: "&sn=1123"        }        var options = $.extend(defaults, options);        var $searchTab = this; //搜索区域id或class        var arrIds = new Array();        $searchTab.find("input, select").each(function() {            if ($.trim(this.id).length > 0) {                arrIds.push(this.id);            }        });        if (options.showSearchbtn != "") {            //自动生成cookieName            if ($.trim(options.cookieName).length == 0) {                options.cookieName = 'c' + new Date().getTime();            }            //Ser 代表高级搜索区是否隐藏变量            var Ser = cookie(options.cookieName);             if (Ser == '0' || Ser == null)            { $(options.showSearchbtn).attr("alt", "显示搜索框"); $searchTab.hide(); }            else            { $(options.showSearchbtn).attr("alt", "隐藏搜索框"); $searchTab.show(); }            //点击按钮显示隐藏某块区域            $(options.showSearchbtn).click(function() {                Ser = cookie(options.cookieName);                if (Ser == '0' || Ser == null)                { cookadd(options.cookieName, "1"); $(this).attr("alt", "隐藏搜索框"); $searchTab.show(); }                else                { cookadd(options.cookieName, "0"); $(this).attr("alt", "显示搜索框"); $searchTab.hide(); }            }).css({ "cursor": "pointer" });        }                //点击搜索按钮,直接指向地址栏链接        $(options.searchbtn).click(function() {            var href = "&";            for (var key in arrIds) {                var keyid = arrIds[key];                var queryTitle = $("#" + keyid).val();                href += "&" + keyid + "=" + encodeURIComponent(queryTitle); //资料显示服务端用Server.UrlDecode方法解码            }            href += options.otherUrl;            if (href.length > 1) {                window.document.body.innerHTML = '';                window.location.href = href.replace('&&', '?');            }        }).css({ "cursor": "pointer" });        //所有输入框里全部默认值设置        for (var key in arrIds) {            var keyid = arrIds[key];            if (keyid != '' && keyid != null) {                if ($("#" + keyid).attr('type') == 'text') {                    var dval = $("#" + keyid).val();                    //搜索条件从地址栏获取值                    var parameter = decodeURIComponent(jQuery.urlParam.get(keyid));                    if (typeof parameter != undefined && parameter != '' && parameter != dval && parameter != 'null' && parameter != 'undefined') {                        $("#" + keyid).val(parameter);                    }                    else if (dval != null && dval != '') {                        //应用jQuery.setTip插件                        $("#" + keyid).setTip({ defaultValue: dval });                    }                } else {                    //搜索条件从地址栏获取值                    var parameter = decodeURIComponent(jQuery.urlParam.get(keyid)); //服务端用Server.UrlEncode方法编码                    if (typeof parameter != undefined && parameter != '' && parameter != 'undefined') {                        $("#" + keyid).val(parameter);                    }                }            }        }    };})(jQuery);

调用事例:

<html><head><link rel="stylesheet" type="text/css" href="../css/index.css" /><script src='../js/jquery-1.4.2.js'  ></script><script src='../js/jquery.setTip.js'  ></script><script src='../js/jQuery.urlParam.js' ></script><script src='../js/jQuery.cookie.js'  ></script><script src='../js/jQuery.AdvSearch.js'  ></script><script >$(function(){$("#ser").AdvSearch({    searchbtn:"img[src$='sosuo.jpg']",showSearchbtn:"img[src$='search.jpg']",cookieName:"sfsdf6"   });})</script></head><body><div id="wrap">  <div id="container">    <div class="main">      <div id="content">        <table width="100%" summary="操作" class="a10">          <tr>            <td colspan="2" style="text-align:right;"><a href="pandiandanxinzeng.html"><img src="../images/scpdd.jpg" alt="生成盘点单"  /></a>  <img src="../images/search.jpg" alt="查询" /></td>            <td  style="text-align:right;"> </td>            <td><span style="text-align:right;"></span></td>            <td > </td>            <td > </td> <td > </td>            <td > </td>            <td > </td>          </tr>      <tr id='ser'>            <td width="9%" style="text-align:right;">采集单号：</td>            <td width="6%" style="text-align:right;"><input name="Input3" id='cako' type="text" class="sousuo1" value="请输入采集单号"/></td>            <td style="text-align:right;" width="6%">采集人：</td>            <td width="10%"><select name="select2" id=per class="dropdownlist">              <option>请选择采集人</option>              <option>张三</option>              <option>李四</option>            </select></td>            <td width="11%"><input name="Input2" id=sdate type="text" class="sousuo2" value="采集开始时间"/>              —</td>            <td width="9%"><input name="Input4" id=edate type="text" class="sousuo2" value="采集结束时间"/></td>            <td width="5%">备注：</td>            <td width="10%"><input name="Input" id=keyword type="text" class="sousuo" value="请录入关键字"/></td>            <td ><img src="../images/sosuo.jpg" alt="搜索" /></td>          </tr>        </table></body></html>

2014版搜索插件在点搜索按钮时可以把默认值自动去掉，并且剔除输入值左右两边空格

下载2014Demo

2015年02月28日版本当页面是嵌套母板页时，textbox的客户端ID是被系统加过前缀的，此时可以通过$.fn.AdvSearch.encode 替换成简洁的地址参数名称。

2015年03月03日版本插件特征如前所述，本次升级新增样式类advsearch，可以使页面多处搜索各自独立。