微信公众号开发--善忘影视(五)

  |   0 评论   |   2,055 浏览

    今天新增了一个搜索的功能,主要是方便web这块的搜索, 直接在网页端也能搜索内容,而不一定要在微信中搜索结果了。

    微信没有认证, 然后呢, 输入框就会出现这种情况了。提示不要输入账号密码什么的,真的无语了, 正好挡在了我的搜索框上。后面再优化好了。出现下面提示,请稍等输入搜索关键字

    IMG<em>2365 IMG<em>2364

     

    搜索结果如下图,效果还不错, 还可以下拉加载更多。

    IMG_2366

    实现这个功能很简单,直接上源码吧,就一点点js的代码

    <body ontouchstart>
    <div class=“weui_tab”>
    <div class=“weuisearchbar” id=“search_bar”>
    <form class=“weuisearchouter” onSubmit=“return false;”>
    <div class=“weuisearchinner”>
    <i class=“weuiiconsearch”></i>
    <input type=“search” class=“weuisearchinput” id=“search_input” placeholder=“搜索” required name=“keys”/>
    <a href=“javascript:;” class=“weuiiconclear” id=“search_clear”></a>
    </div>
    <label for=“search_input” class=“weuisearchtext” id=“search_text”>
    <i class=“weuiiconsearch”></i>
    <span>搜索</span>
    </label>
    </form>
    <a href=“javascript:;” class=“weuisearchcancel” id=“search_cancel”>取消</a>
    </div>
    <div class=“weuitabbd”>
    <div id=“tab1” class=“weuitabbd_item weuitabbd_item_active”>

    </div>
    <div class=“weui-infinite-scroll”>
    <div class=“infinite-preloader”></div><!– 菊花 –>
    正在加载… <!– 文案,可以自行修改 –>
    </div>
    </div>

    <jsp:include page=“/weixin/weuiTabbar” flush=“true”/>
    </div>

    <script src=“/movie/resource/lib/jquery-2.1.4.js”></script>
    <script src=“/movie/resource/js/jquery-weui.js”></script>
    <script>
    var noti = function () {
    $.noti({
    title: “善忘影视!”,
    text: “正在加班开发中!!!”,
    media: “<i class="weuiiconsuccess"></i>”,
    data: {
    message: “等待更晚上的功能出现哦!”
    },
    time: 3000,
    onClick: function (data) {
    $.alert(data.message);
    }
    });

    };

    $(function () {
    $(document).on(“click”, “#show-prompt”, function () {
    $.prompt(“请输入您的邮箱地址”, “邮箱地址”, function (text) {
    //点击确认后的回调函数
    //text 是用户输入的内容
    var Regex = /^(?:\w+.?)\w+@(?:\w+.)\w+$/;
    if (!Regex.test(text)) {
    $.alert(“您的输入邮箱为:” + text + “,请重新输入”, “警告!”);
    }

    var url = “/movie/weixin/sendEmail?id=${mc.id}&email=” + text;
    jQuery.ajax({
    type: “POST”,
    url: url,
    async: false,
    success: function (msg) {
    if (1 == msg) {
    $.alert(“您的邮箱是:” + text, “邮件发送成功”);
    } else {
    $.alert(“您的邮箱是:” + text, “邮件发送失败”);
    }
    }
    });
    }, function () {
    //点击取消后的回调函数
    });
    });
    var pageNo = 1;
    $(“#search_input”).change(function () {
    var keys = $(“#search_input”).val();
    if(keys == "" || $.trim(keys) == ““) {
    return;
    }
    console.log(keys);
    pageNo = 1;
    var url = “<%=request.getContextPath()%>/weixin/search”;
    jQuery.ajax({
    type: “POST”,
    url: url,
    async: false,
    data:“keys=” + keys + “&pageNo=” + pageNo,
    dataType:“json”,
    success: function (arr) {
    if(arr.length > 0) {
    var tab =
    “<div class="bd">” +
    " <div class="weuipanel weuipanel_access">” +
    " <div class="weuipanelbd">”;
    tab += getlistInfo(arr);

    tab += " </div>" +
    " </div>" +
    “</div>”;
    $(“#tab1”).html(tab);
    }else{
    var tab = “<header class=‘demos-header’>” +
    " <h1 class="demos-title">无搜索结果,请修改搜索条件!</h1>" +
    “</header>”;
    $(“#tab1”).html(tab);
    }
    }
    });
    });

    var loading = false; //状态标记
    $(“.weuitabbd_item”).infinite().on(“infinite”, function() {
    if(loading) return;
    loading = true;
    var keys = $(“#search_input”).val();
    console.log(keys);
    console.log(pageNo);
    pageNo = pageNo + 1;
    var url = “<%=request.getContextPath()%>/weixin/search”;
    jQuery.ajax({
    type: “POST”,
    url: url,
    async: false,
    data:“keys=” + keys + “&pageNo=” + pageNo,
    dataType:“json”,
    success: function (arr) {
    if(arr.length > 0) {
    var tab = getlistInfo(arr);
    $(“#tab1”).find(“.weuipanelbd”).append(tab);
    loading = false;
    }else{
    console.log(“没有数据了,不需要加载了。”);
    }
    }
    });
    });

    });
    var getlistInfo = function (arr) {
    var tab = ““;
    $(arr).each(function (index, item) {
    tab += " <a href="/movie/weixin/detail?id=”+item.id+”" class="weuimediabox weuimediaappmsg">" +
    " <div class="weuimediahd">" +
    " <img class="weuimediaappmsg_thumb" src="“+item.firstImg +”" alt="">" +
    " </div>" +
    " <div class="weuimediabd weuipanelft">" +
    " <p class="weuimediadesc">发布日期:“+item.pubTime+”</p>" +
    " <h4 class="weuimediatitle">“+item.title+”</h4>" +
    " </div>" +
    " </a>";
    });
    return tab;
    }
    </script>
    </body>

    评论

    发表评论

    validate