搜索代码整合实例

来源：互联网发布：cf领枪软件编辑：程序博客网时间：2024/06/06 19:54

本次实现七个小搜的共用代码封装。同时引用一个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" onclick="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}}" onerror="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>

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

0 0