在任意页面通过Ajax不跳转在当前页面获取搜索结果
在任意页面、任意位置,通过Ajax处理搜索框,不跳转直接在当前页面获取搜索结果。
实现原理
通过现有的搜索url加入参数:ajax_page=新的模板名称.html,这时候cms会按照模板返回新内容,以便ajax做返回输出处理。
具体步骤
先创建AJAX搜索结果输出的模板文件。注:因为搜索是按照模块内容进行搜索,所以需要提前按照模块创建搜索结果输出模板。假设有个新闻模块,模块名称为:news
创建模板的路径为
PC端:/template/pc/default/home/news/myajax.html
移动端:/template/mobile/default/home/news/myajax.html
提示:myajax.html 可以根据自己的需要随意修改名称。
搜索结果模板内容
{search module=MOD_DIR id=$searchid total=$sototal order=$params.order catid=$catid page=1 pagesize=10 urlrule=$urlrule}
文章标题:{$t.title}
标题截断:{dr_strcut($t.title, 20)}
文章连接:{$t.url}
缩略图:{dr_thumb($t.thumb, 100, 90)}
栏目名称:{dr_cat_value(MOD_DIR,$t.catid, 'name')}
栏目连接:{dr_cat_value('news',$t.catid, 'url')}
更新时间:{$t.updatetime}
{/search}
通过URL进行AJAX搜索
URL连接参数:
请求地址:/index.php?s=news&c=search&catid=1&ajax_page=myajax.html&page=1
参数介绍:
s = 模块名称
catid = 模块内的栏目ID,非必填
c = search (固定,不可更改)
ajax_page = 搜索结果输出模板(准备工作内创建的模板)
page = 请求的分页编号
拼接AJAX
<script>
$.ajax({
type: "GET",
url: "/index.php?s=news&c=search&catid=1&ajax_page=myajax.html&page=1&keyword=关键词",
dataType: "text",
success: function(html){
$('#mysearch').html(html);
}
});
</script>
模板内获取栏目id: url: "/index.php?s=shop&c=search&catid={$catid}&ajax_page=myajax.html&page=1&keyword=关键词",
红色为当前栏目id
实现下拉自动加载
<button class="go-copy btn" data-clipboard-action="copy" data-clipboard-target="#pre17" style="box-sizing: inherit; border-radius: 0.25rem; font-family: Lato, sans-serif; font-size: 0.8rem; line-height: 1.5; display: block; color: rgb(255, 255, 255); background: rgb(51, 51, 51); border-color: rgb(35, 35, 35); padding: 0.375rem 0.75rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; position: absolute; top: 0px; right: 0px; max-width: 100%;">复制代码</button>$(document).ready(function () {
$(window).scroll(function () {
if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
scroll_get = false;
layer.msg('内容加截中,请稍候',{time:1000});
dr_ajax_load_more();
}
});
});
function dr_ajax_load_more(){
Mpage++;
$.get('/index.php?s=[模块名称]&c=search&catid=[栏目ID]&ajax_page=[AJAX模板名称].html&keyword=关键词&page='+Mpage,function(res){
$('.footer-cont').hide();
if(res){
$('#容器ID').append(res);
scroll_get = true;
}else{
layer.msg("已经显示完了",{time:500});
}
}, 'text');
}
</script>
相关文档
- 新浪博客搜索实用技巧大揭秘,精准查找感兴趣内容
- 如何查找网页快照?教你通过百度搜索引擎快速找到备份副本
- 天津网站推广实用指南!本地流量获取与转化提升全攻略
- 河北SEO怎么做?选准本地关键词,侧重用户搜索习惯是关键
- 日常上网常用的百度和 360 搜索引擎,到底哪个更好用?
- 百度搜索排行榜是啥?咋来的?都有哪些不一样的榜?
- 网站推广头疼不已?李守洪排名大师助你提升搜索引擎排名
- 一搜使用全攻略,轻松告别信息搜索难题!它究竟是什么?
- 西安SEO优化怎么做?如何让网站在本地搜索引擎排更前?
- 网站网络推广中反向链接很关键,多样化渠道获取有门道?
- 点点SEO是什么?如何让网站在搜索中更靠前、被更多人看见?
- 揭秘神马seo快速排:如何让网站在搜索结果中一飞冲天?
- SEO建站有多重要?从网站搭建到吸引搜索引擎全解析
- 百度搜索排行里的那些事儿,你真的清楚吗?常见类型有这些
- 苏州SEO优化:帮小老板生意网站在搜索中脱颖而出?门道多着呢
- 聊聊刷百度那些事儿,如何让搜索信息更精准?
- 百度搜索风云榜:汇总搜索情况的榜单,含多类热点排行
- 北京搜索引擎优化咋弄?基本概念及操作办法大揭秘
- 台湾搜索魅力大!自然资源、学术科研、文化艺术皆可探寻?
- 旺道网络营销软件有多厉害?搜索引擎优化与社交媒体营销全搞定