运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

为自动完成搜索添加搜索按钮操作

为自动完成搜索添加搜索按钮操作

本文档详细介绍了如何在Blogger的自动完成搜索功能中添加一个搜索按钮，该按钮允许用户在输入搜索词后，通过点击按钮直接跳转到搜索结果页面。我们将提供修改后的代码示例，并解释如何将其集成到现有的搜索功能中，从而提升用户体验。

集成搜索按钮到自动完成搜索

以下步骤将指导你如何修改现有的自动完成搜索代码，以添加一个搜索按钮，并使其能够将用户重定向到搜索结果页面。

1. 修改 HTML 结构

首先，需要修改 HTML 结构，将输入框和搜索按钮放在同一个 form 元素中。 确保 form 元素的 action 属性设置为你的搜索结果页面的 URL。

<form id="searchForm" action="/search" style="position:relative;width:500px;">
  <input autocomplete="off" name="q" placeholder="Search" value="" />
  <button type="submit">Search</button>
</form>

<ul id="rslt" class="results hidden"></ul>

2. 修改 CSS 样式

为了使搜索按钮与输入框对齐并美观，需要添加一些 CSS 样式。

#searchForm {
  display: flex; /* 使用 Flexbox 布局 */
  position: relative;
  width: 500px;
}

#searchForm input {
  flex: 1; /* 输入框占据剩余空间 */
  background: transparent;
  font-size: 14px;
  line-height: 27px;
  text-indent: 14px;
  color: #212121;
  border: 1px solid #e0e0e0;
  border-right: none;
  border-radius: 2px 0 0 2px;
  outline: 0;
}

#searchForm button {
  width: 80px; /* 按钮宽度 */
  border: 1px solid #e0e0e0;
  border-radius: 0 2px 2px 0;
  background: rgb(230, 230, 230);
  cursor: pointer;
  outline: 0;
  line-height: 27px;
}

3. 修改 J*aScript 代码

修改 J*aScript 代码，移除之前注释掉的 "see all" 按钮相关代码，并添加点击事件，使其重定向到搜索结果页面。

SiteTeam自助建站平台4.6.3 源代码版 SiteTeam自助建站平台4.6.3 源代码版

SiteTeam企业自助建站软件是一部专业为搜索引擎营销(网站优化/SEO)而设计，操作极简单，网站极稳定、故障自动修复、在线升级维护、建站速度极快、专为大众上网营销而设计的完全免费开源企业建站系统！ 1）专为搜索引擎排名而设计。很容易获得较好的搜索引擎排名，也就是说，你通过本网站系统构建起来的企业网站，并用它发布的信息是非常容易获得较好的搜索引擎排名（关于这点，已经有大量的案例）。 2）超简单配

SiteTeam自助建站平台4.6.3 源代码版 0 查看详情 SiteTeam自助建站平台4.6.3 源代码版 
$(window).on("load", function () {
  $("#searchForm input").on("keyup", function (e) {
    var textinput = $(this).val();

    if (textinput) {
      $.ajax({
        type: "GET",
        url: "https://www.soratemplates.com/feeds/posts/summary",
        data: {
          alt: "json",
          q: textinput,
        },
        dataType: "jsonp",
        success: function (data) {
          $(".results,.clear-text").removeClass("hidden");
          $(".results").empty();
          let seeMoreArr = [];
          function mk_list_dom(postUrl, postTitle) {
            return (
              "<li><a href=" +
              postUrl +
              ' title="' +
              postTitle +
              '">' +
              postTitle +
              "</li>"
            );
          }

          if (data.feed.entry) {
            for (var i = 0; i < data.feed.entry.length; i++) {
              for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                if (data.feed.entry[i].link[j].rel == "alternate") {
                  var postUrl = data.feed.entry[i].link[j].href;
                  break;
                }
              }

              var postTitle = data.feed.entry[i].title.$t;

              if (i < 10) {
                $(".results").append(mk_list_dom(postUrl, postTitle));
              } else {
                seeMoreArr.push({ postUrl, postTitle });
              }
            }

            if (data.feed.entry.length > 1) {
              $(".results").append(
                '<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see all</button</div>'
              );
            }

            $(".expand_btn").on("click", (e) => {
              // 使用 window.location.href 重定向到搜索结果页面
              window.location.href = "https://www.google.com/search?q=" + textinput;
            });
          } else {
            $(".results").append("<div> No results </div>");
          }

          data.feed.entry
            ? $(".results").append(
                "<div>found result: " + data.feed.entry.length + "</div>"
              )
            : $(".results").append("<div>found result: 0</div>");
        },
      });
    } else {
      $(".results,.clear-text").addClass("hidden");
    }
  });

  $(".clear-text").click(function () {
    $("#searchForm input").val("");
    $(".results,.clear-text").addClass("hidden");
    $(".results").empty();
  });
});

代码解释:

  • window.location.href = "https://www.google.com/search?q=" + textinput;：这行代码用于将用户重定向到 Google 搜索结果页面。你需要将 https://www.google.com/search?q= 替换为你自己的搜索结果页面 URL，并将 textinput 作为查询参数传递。

4. 完整代码示例

将以上修改整合到一起，得到完整的代码示例：





<form id="searchForm" action="/search" style="position:relative;width:500px;">
  <input autocomplete="off" name="q" placeholder="Search" value="" />
  <button type="submit">Search</button>
</form>

<ul id="rslt" class="results hidden"></ul>



<script>
  //<![CDATA[
  $(window).on("load", function () {
    $("#searchForm input").on("keyup", function (e) {
      var textinput = $(this).val();

      if (textinput) {
        $.ajax({
          type: "GET",
          url: "https://www.soratemplates.com/feeds/posts/summary",
          data: {
            alt: "json",
            q: textinput,
          },
          dataType: "jsonp",
          success: function (data) {
            $(".results,.clear-text").removeClass("hidden");
            $(".results").empty();
            let seeMoreArr = [];
            function mk_list_dom(postUrl, postTitle) {
              return (
                "<li><a href=" +
                postUrl +
                ' title="' +
                postTitle +
                '">' +
                postTitle +
                "</li>"
              );
            }

            if (data.feed.entry) {
              for (var i = 0; i < data.feed.entry.length; i++) {
                for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                  if (data.feed.entry[i].link[j].rel == "alternate") {
                    var postUrl = data.feed.entry[i].link[j].href;
                    break;
                  }
                }

                var postTitle = data.feed.entry[i].title.$t;

                if (i < 10) {
                  $(".results").append(mk_list_dom(postUrl, postTitle));
                } else {
                  seeMoreArr.push({ postUrl, postTitle });
                }
              }

              if (data.feed.entry.length > 1) {
                $(".results").append(
                  '<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see all</button</div>'
                );
              }

              $(".expand_btn").on("click", (e) => {
                // 使用 window.location.href 重定向到搜索结果页面
                window.location.href = "https://www.google.com/search?q=" + textinput;
              });
            } else {
              $(".results").append("<div> No results </div>");
            }

            data.feed.entry
              ? $(".results").append(
                  "<div>found result: " + data.feed.entry.length + "</div>"
                )
              : $(".results").append("<div>found result: 0</div>");
          },
        });
      } else {
        $(".results,.clear-text").addClass("hidden");
      }
    });

    $(".clear-text").click(function () {
      $("#searchForm input").val("");
      $(".results,.clear-text").addClass("hidden");
      $(".results").empty();
    });
  });
  //]]>
</script>

5. 注意事项

  • 确保替换示例代码中的 URL (例如 https://www.google.com/search?q=) 为你自己的搜索结果页面 URL。
  • 根据你的网站设计调整 CSS 样式，以使搜索按钮与整体风格一致。
  • 测试代码在不同浏览器和设备上的兼容性。

总结

通过以上步骤，你可以在 Blogger 的自动完成搜索功能中成功添加一个搜索按钮，从而改善用户体验并提高搜索效率。记住，根据你的具体需求调整代码，并进行充分的测试，以确保其正常运行。

以上就是为自动完成搜索添加搜索按钮操作的详细内容，更多请关注其它相关文章！


# 重定向  # 全南推广网络营销参考价  # 黄山seo权重优势  # 台州旅游网站建设素材  # 崂山网站关键词优化  # 胶州网站建设的地方  # 库尔勒集团网站建设  # 短视频推广营销在哪里  # 辽源seo软件技巧  # 医疗网站建设方案公司  # 惠州seo优化优势  # 为你  # 搜索功能  # 自己的  # 输入框  # 源代码  # css  # 自助建站  # 自动完成  # 搜索结果  # 网站优化  # win  # app  # 浏览器  # go  # ajax  # json  # js  # html  # jquery  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： sublime如何撤销关闭的标签页_sublime重新打开已关闭文件技巧  《健康大兴》注册方法介绍  Lar*el Eloquent：高效删除多对多关系中无关联子记录的父模型  曝《丝之歌》DLC有望开发！开发商还有神秘新企划  qq邮箱格式填写示例 qq邮箱标准填写规范  天天漫画2025最新入口 天天漫画永久有效登录入口  《淘票票》添加到苹果钱包教程  iSpring三分屏制作教程  pubmed数据库官方主页_pubmed学术论文查找官网直达  word文档中的分隔符有哪些不同类型和用途_Word分隔符类型与用途方法  MySQL多重关联查询：利用别名高效获取同一表的多个关联字段  QQ阅读小说搜索入口地址_QQ阅读小说搜索入口地址搜索在线阅读  Golang如何使用gRPC拦截器实现日志收集_Golang gRPC拦截器日志收集实践  J*aScript模拟悬停与点击：自动化网页动态元素交互指南  使用Google服务账号实现Google Drive API无缝集成与文件访问  猫眼电影app怎么查询电影院的营业时间_猫眼电影影院营业时间查询教程  鸿蒙单条备忘录如何加密  《金山词霸》语音翻译方法  iPhone 15 Pro如何查看存储空间占用_iPhone 15 Pro存储空间查看教程  J*aScript实现网页表单实时输入字段比较与验证教程  mysql通配符能用于日志查询吗_mysql通配符在系统日志查询中的实际使用方法  《下一站江湖2》风神腿获取攻略  Bootstrap 5导航栏折叠功能失效：数据属性迁移指南  J*aScript类型数组_TypedArray使用  Scipy Sparse CSR 矩阵非零元素行级遍历的最佳实践  J*a中导出MySQL表为SQL脚本的两种方法  mail.qq.com登录入口 QQ邮箱网页版直达  J*a里如何处理ArithmeticException并防止除零_算术异常防护策略解析  OTT月报 | 2025年9月智能电视大数据报告  QQ邮箱手机版网页版 QQ邮箱登录入口地址  《全民k歌》网页版最新登录入口一览  TikTok视频播放中断怎么办 TikTok播放异常修复方法  支付宝如何解绑云闪付_支付宝与云闪付账户关联解除方法  《杖剑传说》食谱大全  快递物流路径揭秘  跨语言测试实践：使用Python Selenium测试现有J*a Web项目  如何发挥新媒体矩阵作用？新媒体矩阵怎么搭建？  MongoDB聚合管道：高效统计列表中各项的文档数量  firefox火狐浏览器最新官网主页_ firefox火狐浏览器平台入口直达官方链接  c++类和对象到底是什么_c++面向对象编程基础  如何在CSS中使用伪类选择器_hover实现悬停效果  Python项目中的条件导入：解决跨模块依赖问题  PySimpleGUI中实现键盘按键与按钮事件绑定教程  火柴人战争网页版在线玩  @Team是什么？揭秘团队含义  Leaflet地图弹出窗口图片动态显示：避免缺失图标的专业指南  电子白板帮助菜单使用指南  MySQL多重JOIN技巧：高效关联同一表获取多角色信息  cad视图选项卡不见了怎么办_cad视图标签恢复显示方法  TikTok视频播放不流畅怎么办 TikTok视频播放优化方法 

 2025-10-11

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.