微信公众号开发－－善忘影视（五）

2016-07-22 | 0 评论 | 2,139 浏览

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

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

IMG<em>2365 IMG<em>2364

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

实现这个功能很简单，直接上源码吧，就一点点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>

发表评论