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

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

聖光之護

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

原创

1044人浏览过

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

本文档详细介绍了如何在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" 按钮相关代码，并添加点击事件，使其重定向到搜索结果页面。

动力先锋仿阿里巴巴B2B电子商务系统

前台功能介绍:1、网页首页显示有高级会员推荐，精品推荐，商业机会分类列表，最新供求信息，网站动态，推荐企业，行业动态等;2、商业机会栏目功能有：二级分类，已经带有详细分类的数据库，后台可以更改增加操作，并可以推荐公司，栏目分为分类显示信息，最新的采购、供应、合作和代理信息，搜索时同样按分类，信息，时间，交易类型等搜索;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. 注意事项