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

 (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);                               
调用事例:











生成盘点单  查询            
采集单号: 采集人: 备注: 搜索

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

下载2014Demo

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

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

你可能感兴趣的:(搜索,QueryString,jquery插件,input,function,class,jquery)