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

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

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

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

1. 修改 HTML 结构

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

  
  Search

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. 修改 JavaScript 代码

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

$(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 (
              "
' +
              postTitle +
              "
"
            );
          }

          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(
                '  see all {
              // 使用 window.location.href 重定向到搜索结果页面
              window.location.href = "https://www.google.com/search?q=" + textinput;
            });
          } else {
            $(".results").append(" No results ");
          }

          data.feed.entry
            ? $(".results").append(
                "found result: " + data.feed.entry.length + ""
              )
            : $(".results").append("found result: 0");
        },
      });
    } 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. 完整代码示例

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

  
  Search




×

5. 注意事项

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

总结

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