为Autocomplete搜索添加搜索按钮功能的实现教程

本文档旨在指导开发者如何在Blogger的Autocomplete搜索功能中添加一个搜索按钮，实现点击按钮跳转到搜索结果页面的功能。我们将提供详细的代码示例和步骤，帮助你轻松地在你的Blogger博客中集成此功能，提升用户体验。

概述

Autocomplete搜索能够为用户提供快速的搜索建议，但有时用户可能需要查看完整的搜索结果页面。在本教程中，我们将通过修改现有的Autocomplete搜索代码，添加一个“搜索全部”按钮，点击该按钮将用户重定向到包含完整搜索结果的页面。

步骤详解

1. HTML结构调整

   首先，我们需要修改HTML结构，将搜索输入框和搜索按钮放置在同一个form元素中。这将简化后续的事件处理。

   <div style="position:absolute;top:50px;width:500px;">
       <form id="searchForm" action="/search">
           <input autocomplete="off" name="q" placeholder="Search" value="" />
           <button type="submit">搜索</button>
       </form>
   
       <ul id="rslt" class="results hidden"></ul>
   </div>

   登录后复制

   注意，这里添加了type="submit"到button中，这样点击button会触发form的submit事件。

2. CSS样式优化

   为了使搜索按钮与输入框对齐，并保持整体美观，我们需要调整CSS样式。

   

   纳米搜索

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

   30

   查看详情

   #searchForm {
       display: inline-flex;
       position: relative;
       width: 100%;
   }
   #searchForm input {
       background: transparent;
       font-size: 14px;
       line-height: 27px;
       text-indent: 14px;
       width: 90%;
       color: #212121;
       border: 1px solid #e0e0e0;
       border-right: none;
       border-radius: 2px 0 0 2px;
       outline: 0;
   }
   #searchForm input:hover,
   #searchForm button:hover {
       border: 1px solid #b9b9b9;
       border-top: 1px solid #a0a0a0;
       -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
       -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   }
   #searchForm button {
       width: 10%;
       border: 1px solid #e0e0e0;
       border-radius: 0 2px 2px 0;
       background: rgb(230, 230, 230);
       cursor: pointer;
       outline: 0;
       line-height: 27px;
   }
   #searchForm button svg {
       vertical-align: middle;
       width: 21px;
       height: 21px;
   }
   .results {
       position: absolute;
       margin:0;
       padding-left: 0;
       background: #fff;
       border: 1px solid #e0e0e0;
       width: 100%;
       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;
   }

   登录后复制

3. JavaScript事件处理

   修改JavaScript代码，添加点击按钮后的事件处理逻辑。 因为html已经设置button的type为submit，所以只需要修改form的action属性就可以实现跳转。

   $(window).on("load", function () {
       $("#searchForm input").on("keyup", function (e) {
           var textinput = $(this).val();
   
           if (textinput) {
               $.ajax({
                   type: "GET",
                   url: "https://www.ilmulislam.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) => {
                               alert("redirect to : www.google.com/search?q=" + textinput)
                           });
   
                           /*
   
                           data.feed.entry.length > 9 &&
                             $(".results").append(
                               '<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see more</button></div>'
                             ),
   
                             seeMoreArr.forEach(({ postUrl, postTitle }) => {
                               $(".expanded_result").append(mk_list_dom(postUrl, postTitle));
                             }),
   
                             $(".expand_btn").on("click", (e) => {
                               $(".expanded_result").toggle();
   
                               $(e.target).text(function (i, text) {
                                 return text === "see more" ? "see less" : "see more";
                               });
   
                             });
   
                            */
   
                       } 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();
       });
   
       $("#searchForm").submit(function(event) {
           event.preventDefault(); // 阻止默认的表单提交行为
           var searchTerm = $("#searchForm input").val();
           if (searchTerm) {
               window.location.href = "https://www.google.com/search?q=" + searchTerm;
           }
       });
   });

   登录后复制

   这段代码的关键在于，它首先阻止了表单的默认提交行为，然后获取输入框中的搜索词，并使用window.location.href将页面重定向到Google搜索结果页面。 如果你希望跳转到你自己的站内搜索，修改href即可。

完整代码示例

将上述HTML、CSS和JavaScript代码整合到你的Blogger模板中，确保jQuery库已正确引入。

注意事项

• 确保jQuery库已正确引入。
• 根据你的实际需求修改搜索结果页面的URL。
• 根据你的博客风格调整CSS样式。
• 测试在不同浏览器和设备上的兼容性。

总结

通过本教程，你学习了如何在Blogger的Autocomplete搜索功能中添加一个搜索按钮，并实现点击按钮跳转到搜索结果页面的功能。这将显著提升用户体验，并为用户提供更便捷的搜索方式。希望本教程对你有所帮助！

以上就是为Autocomplete搜索添加搜索按钮功能的实现教程的详细内容，更多请关注php中文网其它相关文章！