微信公众号开发－－善忘影视（五）
今天新增了一个搜索的功能，主要是方便web这块的搜索， 直接在网页端也能搜索内容，而不一定要在微信中搜索结果了。
微信没有认证， 然后呢， 输入框就会出现这种情况了。提示不要输入账号密码什么的，真的无语了， 正好挡在了我的搜索框上。后面再优化好了。出现下面提示，请稍等输入搜索关键字
搜索结果如下图，效果还不错， 还可以下拉加载更多。
实现这个功能很简单，直接上源码吧，就一点点js的代码
<body ontouchstart> <div class="weui_tab"> <div class="weui_search_bar" id="search_bar"> <form class="weui_search_outer" onSubmit="return false;"> <div class="weui_search_inner"> <i class="weui_icon_search"></i> <input type="search" class="weui_search_input" id="search_input" placeholder="搜索" required name="keys"/> <a href="javascript:;" class="weui_icon_clear" id="search_clear"></a> </div> <label for="search_input" class="weui_search_text" id="search_text"> <i class="weui_icon_search"></i> <span>搜索</span> </label> </form> <a href="javascript:;" class="weui_search_cancel" id="search_cancel">取消</a> </div> <div class="weui_tab_bd"> <div id="tab1" class="weui_tab_bd_item weui_tab_bd_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=“weui_icon_success”></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=“weui_panel weui_panel_access”>” + ” <div class=“weui_panel_bd”>”; 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; //状态标记 $(“.weui_tab_bd_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(“.weui_panel_bd”).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=“weui_media_box weui_media_appmsg”>” + ” <div class=“weui_media_hd”>” + ” <img class=“weui_media_appmsg_thumb” src=""+item.firstImg +"" alt="">” + ” </div>” + ” <div class=“weui_media_bd weui_panel_ft”>” + ” <p class=“weui_media_desc”>发布日期：“+item.pubTime+”</p>” + ” <h4 class=“weui_media_title”>“+item.title+”</h4>” + ” </div>” + ” </a>”; }); return tab; } </script> </body>