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

最新推荐文章于 2023-05-25 18:05:09 发布

chinet_bridge

最新推荐文章于 2023-05-25 18:05:09 发布

阅读量3.7k

点赞数

分类专栏：搜索 QueryString 文章标签： jquery插件 input function class jquery

本文链接：https://blog.csdn.net/chinet_bridge/article/details/7207893

版权

搜索同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

QueryString

1 篇文章 0 订阅

订阅专栏

 (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，可以使页面多处搜索各自独立。

chinet_bridge

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JQuery插件第十八个:高级搜索集成处理

(function($) { $.fn.AdvSearch = function(options) { var defaults = { searchbtn: "", //搜索按钮, 输入Jquery选择器名称 showSearchbtn: "", //显示或隐藏搜索区域的按钮, 输入Jquery选择器名称
复制链接

扫一扫