搜索代码整合实例

本次实现七个小搜的共用代码封装。同时引用一个js（search.js）,传的不同参数在html里面控制，实现数据分离和便于控制。

search.js如下：

(function(){
    //搜索代码整合
    var searchFunction=(function(){
        var Fun = function(){
            var that = this;
            that.options = arguments[1];
            that.init();
        };
        Fun.prototype.init = function(){
            var that = this;
            var keyword=$(that.options.searchInput).val()?$(that.options.searchInput).val():decodeURIComponent(serlizeUrlData().key);
            console.log(keyword);
            $(that.options.searchInput).val(keyword);
            $("#searchText").trigger("click");
            if(keyword){
                var respons = getData("post",that.options.getInfoPort,{keyword:keyword});
                if(respons.status==0){
                // that.formateData(respons.value.list,"username");
                switch(that.options.pageType){
                    case "user":
                    that.formateData(respons.value.list,"username");
                    that.formateData(respons.value.list,"anfou_id");
                    break;
                    case "shop":
                    that.formateData(respons.value.list,"shop_name");
                    break;
                    case "room":
                    that.formateData(respons.value.list,"username");
                    that.formateData(respons.value.list,"name");
                    break;
                    case "pgs_note":
                    formateData(data.value.list,"result");
                    formateData(data.value.list,"title");
                    break;
                    case "pgs":
                    formateData(data.value.list,"name");
                    formateData(data.value.list,"address");
                    break;
                    case "goods":
                    formateData(data.value.list,"name");
                    break;
                    case "blog":
                    formateData(data.value.list,"username");
                    formateData(data.value.list,"content");
                    break;
                };
                console.log(respons);
                templatePublic(respons,that.options.templateContainer,that.options.templateId);
                if(respons.value.count==0){
                    $(".icon-box").css({
                        "display":"block"
                    });
                    $(".weui-cells__title").css({
                        "display":"none"
                    });
                    $(".connection").html(keyword);
                }else{
                    $(".icon-box").css({
                        "display":"none"
                    });
                    $(".weui-cells__title").css({
                        "display":"block"
                    })
                };
                }else{
                    alert(response.value);
                };
            };
                that.backButton();
          };
        Fun.prototype.formateData=function(respons,key){
            var that=this;
            var keyword=$(that.options.searchInput).val();
                for(var i=0;i<respons.length;i++){
                    var thisReg = eval("/"+keyword+"/g");
                    respons[i][key] = respons[i][key].replace(thisReg,"<span class='text-red'>"+keyword+"</span>")
                };
                return respons;
            };
        Fun.prototype.backButton=function(){
            var that = this;
            $("body").on("click",that.options.backButton,function(){
               history.go(-1);
            });
        };
        return Fun;
    })();
    // jQuery的原型上扩展方法
    $.fn.searchFunction=function(){
        var options={
            // ajax的请求地址
            getInfoPort: "/index.php/App/search/searchUser",
            // 模板的id
            templateId:"usersId",
            // 模板容器
            templateContainer:".content .users",
            // 搜索框
            searchInput: "#searchInput",
            //解密后的关键字
            keyword:decodeURIComponent(serlizeUrlData().key),
            // 返回按钮
            backButton: "#share",
            pageType: "user",
        };
        $.extend(options,arguments[0]);
        $(this).each(function(index,elem){
            new searchFunction($(elem),options);
        });
    };
    // 封装ajax方法
    // function getData(ajaxType,ajaxUrl,ajaxBaseData){
    // 	var _response;
    // 	$.ajax({
    //         type:ajaxType,
    //         url:ajaxUrl,
    //         dataType:json,
    //         async:false,
    //         data:ajaxBaseData,
    //         success:function(respons){
    //             _response=respons;
    //         }
    // 	});
    // 	return _response;
    // };
})();

以user的搜索为例,html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>搜索</title>
	<link rel="stylesheet" href="../../stylesheets/Group/weui.min.css">
	<link rel="stylesheet" href="../../stylesheets/Group/swiper.min.css">
	<link rel="stylesheet" href="../../stylesheets/Group/style.css">
	<link rel="stylesheet" href="../../stylesheets/Search/search.css">
	<style type="text/css">
          .role{
          	    position: absolute;
                height: 11px;
                width: 11px;
                right: 0px;
                bottom: 0;
          }
	</style>
</head>
<body class="bg-white">
<div class="page">
	<header class="bar bar-nav">
		<a href="javascript:;" class="button button-link button-nav pull-left" οnclick="history.back(-1)">
			<span class="icon icon-left"></span>返回
		</a>
		<a href="javascript:;" class="button button-link button-nav pull-right" id="share">
			取消
		</a>
		<div class="weui-search-bar" id="searchBar">
			<form class="weui-search-bar__form" action="#">
				<div class="weui-search-bar__box">
					<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" autocomplete=off>
					<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
				</div>
				<label class="weui-search-bar__label" id="searchText">
					<i class="weui-icon-search"></i>
					<span>搜索</span>
				</label>
			</form>
		</div>
	</header>
	<div class="content">
	    <div class="weui-cells__title">安否用户</div>
	    <div class="users">
	    	
	    </div>
		<div class="icon-box" style="display:none;">
			<span class="icon icon-order"></span>
			<p>抱歉，没有找到和<span class="text-red connection"></span>相关信息</p>
		</div>
	</div>
</div>
<!--*******************安否用户模板*********************-->
<script type="text/html" id="usersId">
	  {{each value.list as item i}}
	    	<div class="weui-panel weui-panel_access">
			    <div class="weui-panel__bd">
				    <a href="/Assert/Weixin/www/pgs/user.html?user_id={{item.user_id}}" class="weui-media-box weui-media-box_appmsg">
					<div class="weui-media-box__hd weui-media-box__smavatar" style="position:relative;overflow:initial;">
						{{if item.head_image==null}}
                        <img src="/Assert/Weixin/images/logo.png" style="width:100%;height:100%;border-radius: 100%;"> {{else}}
                        <img src="http://upload.iiifood.cn{{item.head_image}}" οnerrοr="this.src='../../images/logo.png'" style="width:100%;height:100%;border-radius:100%;"> {{/if}} {{if item.role == 2}}
                        <img class="role" src="/Assert/Weixin/images/icon_producer_no.png"> {{else if item.role == 3}}
                        <img class="role" src="/Assert/Weixin/images/icon_consumer_nor2.png"> {{else if item.role ==4}}
                        <img class="role" src="/Assert/Weixin/images/icon_expert_nor.png"> {{else}}
                        <img class="role" src="" style="display:none;"> {{/if}}
					</div>
					<div class="weui-media-box__bd">
						<h4 class="weui-media-box__title"><span class="text-red"></span>{{#item.username}}</h4>
						<p class="weui-media-box__desc">安否ID：{{#item.anfou_id}}</p>
					</div>
				    </a>
			    </div>
			    {{/each}}
		    </div>
</script>
<script type="text/javascript" src="../../js/Public/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/Pgs/jquery-weui.min.js"></script>
<script type="text/javascript" src="../../js/Public/template.js"></script>
<script type="text/javascript" src="../../js/Public/public.js"></script>
<script type="text/javascript" src="../../origin_js/search/search.js"></script>
<!-- <script type="text/javascript" src="../../js/search/search_user.js"></script> -->
<script type="text/javascript">
	(function(){
	//进入加载
	$("body").searchFunction({
		            //获取信息借口
	                getInfoPort:"/index.php/App/search/searchUser",
	                // 模板的id
	                templateId:"usersId",
	                //模板容器
	                templateContainer:".content .users",
	                // 搜索框
	                searchInput: "#searchInput",
	                // 返回按钮
	                backButton: "#share",
	                pageType: "user",
	});
	//点击搜索
	$("form").submit(
	    function(){
	        $("body").searchFunction(
	            {
	                //获取信息借口
	                getInfoPort:"/index.php/App/search/searchUser",
	                // 模板的id
	                templateId:"usersId",
	                //模板容器
	                templateContainer:".content .users",
	                // 搜索框
	                searchInput: "#searchInput",
	                // 返回按钮
	                backButton: "#share",
	                pageType: "user",
	            }
	        );
	        return false;
	    }
	);
})();
</script>
</body>
</html>

使用此方法的好处是减少代码的耦合性，实现公共代码的公用。