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

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

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

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

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

1. 修改 HTML 结构

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

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

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

修改 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 1) { $(".results").append( '

' ); } $(".expand_btn").on("click", (e) => { // 使用 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. 完整代码示例

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

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

5. 注意事项