为自动完成搜索添加搜索按钮操作-html教程-PHP中文网

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

聖光之護

发布： 2025-10-11 10:15:14

原创

1016人浏览过

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

本文档详细介绍了如何在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. 修改 JavaScript 代码

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

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

$(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. 完整代码示例

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

<style type="text/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;
  }

  .results {
    position: absolute;
    top: 50px;
    background: #fff;
    border: 1px solid #e0e0e0;
    width: 90%;
    min-width: 320px;
    border-top: unset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .results li {
    line-height: 15px;
    list-style: none;
  }

  .results li a {
    display: block;
    padding: 0 15px;
    color: #212121;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .results li:hover {
    background: rgb(230, 230, 230);
  }

  .hidden {
    display: none !important;
  }

  .expanded_result {
    display: none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

<button class="clear-text hidden">×</button>

<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. 注意事项