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

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

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

本文档详细介绍了如何在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 】


相关推荐： 《下一站江湖2》风神腿获取攻略  圆通快递官方入口不需要登录 在线查询入口快速查询  键盘声音异常怎么回事_键盘异响怎么处理  漫蛙官网(首页入口)_漫蛙漫画稳定访问教程分享  使用TinyButStrong生成HTML并结合Dompdf创建PDF教程  sublime怎么在文件中显示代码结构大纲_sublime符号列表功能  Golang如何使用crypto/md5生成哈希_Golang MD5哈希生成方法  Cassandra中复合主键、二级索引与ORDER BY排序的限制与解决方案  如何自定义苹果手机铃声  Keras中Convolution2D层及其核心辅助层详解  掌握产品代码正则表达式：避免常见陷阱与精确匹配  Flexbox布局中Stencil组件宽度不显示问题解析与:host尺寸控制  windows10怎么设置电源按钮_windows10按下电源键功能修改  汽水音乐车机版官网5.0 汽水音乐车机版5.0版本下载入口  从HTML表单获取逗号分隔值并转换为NumPy数组进行预测  在VS Code中利用AI辅助进行代码迁移  荣耀magicv5怎么上手测评  Pandas中基于动态偏移量实现DataFrame列值位移的策略  J*aScript中高效处理用户输入：从Keyup事件到表单提交的优化实践  c++类和对象到底是什么_c++面向对象编程基础  苹果17 Pro如何启用分屏浏览_iPhone 17 Pro分屏浏览设置步骤  VS Code源代码管理(SCM)视图的进阶使用技巧  AffinityDesigner图层蒙版怎么用_AffinityDesigner图层蒙版设计应用  菜鸟驿站的取件码忘了怎么办 手机快速查询指南  在PySimpleGUI中实现键盘按键绑定按钮事件  海棠阅读登录教程_详细讲解海棠登录操作  鲨鱼剧场app金币获取方法  c++如何实现一个简单的RPC框架_c++远程过程调用原理与实践  毒蘑菇VOLUMESHADER_BM官网首页登录入口 毒蘑菇VOLUMESHADER_BM官网首页登录入口说明  花生壳内网映射新方案  C++中std::thread和std::async的区别_C++并发编程与线程与异步任务比较  猫眼电影app如何设置电影上映提醒_猫眼电影上映提醒设置教程  使用Selenium在无头Chrome中交互动态菜单和复选框的策略  优化Asyncio嵌套函数调度：使用生产者-消费者模式实现并发流处理  店铺如何做视频号推广？做视频号推广有用吗？  《万兴喵影》导出视频方法  《环球网校》设置报考省市方法  sublime怎么快速在浏览器中预览HTML_sublime配置View in Browser教程  使用Google服务账号实现Google Drive API无缝集成与文件访问  12306售票时间最新规定 | 网上订票和车站窗口时间一样吗  sublime如何自定义文件类型图标_AFileIcon插件的主题切换与个性化配置  网站体验不好=浪费钱:如何提升-用户体验效果差  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  《淘票票》添加到苹果钱包教程  银信通自动开通原因揭秘  WPS长文档分栏排版不乱方法_WPS分栏+分节符报纸排版教程  PHP odbc_fetch_array 返回值处理：如何正确访问嵌套数组元素  苹果官网国补入口在哪  oppo手机如何通过下拉通知栏截图_oppo手机通知栏快捷截图方法  全球各国上班时间表外贸邮件时间 

 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.