业务经理

微信扫描以上二维码

028-61286886

技术咨询

在任意页面、任意位置,通过Ajax处理搜索框,不跳转获取搜索结果

迅睿框架 更新 2024-03-08 14:17:13 sloafer

简单粗暴:在任意页面、任意位置,通过Ajax处理搜索框,不跳转获取搜索结果


再通过Jquery直接Append到自己想要的位置。


思路:


创建一个只有(搜索结果)的search.html模板,里面还按照正常的搜索结果标签写法正常写就行。

注意:不需要有其它的header和footer还有页面中其它的html代码。因为我们只需要这一部分就可以了。

{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('请输入搜索关键词',{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其实就是你search.html模板里面的内容。直接显示在对应的位置(一般是搜索框下面)即可。


就是这么简单粗暴。太复杂的咱也不会。

方案

  • 谈笑淡轻云 #1 · 2022-03-25 10:04:08
    收藏了。
  • qijifuwu #2 · 2022-11-13 00:31:02
    学习了 感谢分享
  • eawea #3 · 2024-03-08 14:17:13
    不错,谢谢分享

迅睿系统漏洞

GeoSeo工具箱
GeoSeo工具箱(2026-10-30)
新增城市落地页FAQ自定义 新增 Site Scan 分析报告并支...
外贸多语言建站
外贸多语言建站(2026-10-30)
修正对百度编辑器提取支持
AI文章生成器
AI文章生成器(2026-10-29)
任务插图设置数量
Bing站长数据
Bing站长数据(2026-10-29)
根据BING接口调整菜单 各个页面数据支持点击查看详情
按字段付费
按字段付费(2026-10-29)
按字段付费用于模块的字段设置一定的价格,当用户购买了此内容的字段时才...
泛解析站群系统
泛解析站群系统(2026-10-29)
AI队列增加清空按钮 表单提示语收敛 目录模式不接管主域名模板
账号注销
账号注销(2026-10-29)
用于用户中心的注销账号申请,后台审核通过后注销此账号。后台统一管理注...
邮件群发
邮件群发(2026-10-28)
修改模板的命名
自定义收款/捐款
自定义收款/捐款(2026-10-28)
自定义收款或捐款插件可以让用户快速创建付款或者捐款功能
CMS内容批量修改
CMS内容批量修改(2026-10-28)
后台批量修改文章内容的指定字段在插件后台可以任意指定字段