本文档详细介绍了如何在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 代码
修改 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 ( " 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. 完整代码示例
将以上修改整合到一起，得到完整的代码示例：
#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; } //<![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 ( " 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(); }); }); //]]>
5. 注意事项
确保替换示例代码中的 URL (例如 https://www.google.com/search?q=) 为你自己的搜索结果页面 URL。根据你的网站设计调整 CSS 样式，以使搜索按钮与整体风格一致。测试代码在不同浏览器和设备上的兼容性。
总结
通过以上步骤，你可以在 Blogger 的自动完成搜索功能中成功添加一个搜索按钮，从而改善用户体验并提高搜索效率。记住，根据你的具体需求调整代码，并进行充分的测试，以确保其正常运行。
以上就是为自动完成搜索添加搜索按钮操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583256.html
微信扫一扫 
支付宝扫一扫 
