簡單粗暴:在任意頁面、任意位置,通過Ajax處理搜索框,不跳轉(zhuǎn)獲取搜索結(jié)果
再通過Jquery直接Append到自己想要的位置。
思路:
創(chuàng)建一個(gè)只有(搜索結(jié)果)的search.html模板,里面還按照正常的搜索結(jié)果標(biāo)簽寫法正常寫就行。
注意:不需要有其它的header和footer還有頁面中其它的html代碼。因?yàn)槲覀冎恍枰@一部分就可以了。
{search module=MOD_DIR id=$searchid total=$sototal order=$params.order catid=$catid page=1 pagesize=5000 urlrule=$urlrule return=rs}
<li>
<div class="shang">{$rs.title}</div>
<div class="xia">{$rs.description}</div>
</li>
{/search}在任意位置的搜索框(搜索按鈕)上面綁定JS事件
<script>
$(document).ready(function () {
$(".search_btn").click(function(){
var keyword = $(".search_text").val();
if(keyword == ''){
layer.msg('請(qǐng)輸入搜索關(guān)鍵詞',{time:1000});
$(".search_text").focus();
return false;
}else{
$.ajax({
type: "GET",
url: "index.php?s=shop&c=search&catid=15&keyword="+keyword+"&ajax_page=search.html",
dataType: "text",
success: function(html){
$("#content_list").html(html);
}
});
}
});
});
</script>就這樣就可以了。Ajax成功后的html其實(shí)就是你search.html模板里面的內(nèi)容。直接顯示在對(duì)應(yīng)的位置(一般是搜索框下面)即可。
就是這么簡單粗暴。太復(fù)雜的咱也不會(huì)。