使用jQuery實現實時模糊查詢功能
阿新 • • 發佈:2018-12-31
//搜尋
$('#search').bind('input propertychange',function(){
$('#_list').empty().hide();
$('#top_list').empty().hide();
$('#gengduo').hide();
var input="";
$('#result').empty().show();
input =$('#search').val();
if(input.length<0||input==null||input==""){
$('#result' ).empty();
}
$.ajax({
method:'post',
url:'${ctx}/getPostsByTitle?title='+input,
dataType:'json',
success:function(data){
if(data.length>0){
var nums = 10; //每頁出現的數量
var pages = Math.ceil((data.length)/nums); //得到總頁數
var thisDate = function (curr){
//此處只是演示,實際場景通常是返回已經當前頁已經分組好的資料
last = curr*nums - 1;
var str=""; var str1="";var str2="";var str3="";
last = last >= data.length ? (data.length-1) : last;
for(var i = (curr*nums - nums); i <= last; i++){
/* for(var i=0;i<data.length;i++){ */
if(data[i].top==1&&data[i].nice==1){
str+='<li class="fly-list-li">'
+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
+'</a>'
+'<h2 class="fly-tip">'
+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
+'<span class="fly-tip-stick">置頂</span>'
+'<span class="fly-tip-jing">精帖</span>'
+'</h2>'
+'<p>'
+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
+'<span>'+data[i].starttime+'</span>'
+'<span>layui框架綜合</span>'
+'<span class="fly-list-hint">'
+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''
+'<i class="iconfont" title="人氣"></i> '+data[i].view+''
+'</span>'
+'</p>'
+'</li>';
//$('#result').append(html);
}
if(data[i].top==1&&data[i].nice==0){
/* 置頂帖 */
str1+='<li class="fly-list-li">'
+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
+'</a>'
+'<h2 class="fly-tip">'
+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
+'<span class="fly-tip-stick">置頂</span>'
+'</h2>'
+'<p>'
+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
+'<span>'+data[i].starttime+'</span>'
+'<span>layui框架綜合</span>'
+'<span class="fly-list-hint">'
+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''
+'<i class="iconfont" title="人氣"></i> '+data[i].view+''
+'</span>'
+'</p>'
+'</li>';
}
if(data[i].top==0&&data[i].nice==1){
/* 加精帖 */
str2+='<li class="fly-list-li">'
+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
+'</a>'
+'<h2 class="fly-tip">'
+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
+'<span class="fly-tip-jing">精帖</span>'
+'</h2>'
+'<p>'
+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
+'<span>'+data[i].starttime+'</span>'
+'<span>layui框架綜合</span>'
+'<span class="fly-list-hint">'
+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''
+'<i class="iconfont" title="人氣"></i>'+data[i].view+''
+'</span>'
+'</p>'
+'</li>';
}
if(data[i].top==0&&data[i].nice==0){
/* 普通帖 */
str3+='<li class="fly-list-li">'
+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
+' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
+'</a>'
+'<h2 class="fly-tip">'
+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
+'</h2>'
+'<p>'
+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
+'<span>'+data[i].starttime+'</span>'
+'<span>layui框架綜合</span>'
+'<span class="fly-list-hint"> '
+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''
+'<i class="iconfont" title="人氣"></i>'+data[i].view+''
+'</span>'
+'</p>'
+'</li>';
}
}
return str+str1+str2+str3;
};
//呼叫分頁
laypage({
cont: $('.page_list'),
pages: pages, //總頁數
groups:3, //連續顯示的分頁數
// skip:true,//是否顯示跳轉功能
skin:'#009688', //載入內建面板,也可以直接賦值16進位制顏色值,如:#c00
jump: function(obj,first){
document.getElementById('result').innerHTML = thisDate(obj.curr);
}
})
}else{
var html='<div class="fly-none">並無相關資料</div>';
$('#top_list').empty().hide();
$('#_list').empty().hide();
$('#result').append(html);
}
},
error:function(data){
layer.msg('請求異常,請重試'+JSON.stringify(data), {shift: 6,time:3000});
}
})
});