本文档详细介绍了如何在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" 按钮相关代码，并添加点击事件，使其重定向到搜索结果页面。
$(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. 注意事项
- 确保替换示例代码中的 URL (例如 https://www.google.com/search?q=) 为你自己的搜索结果页面 URL。
- 根据你的网站设计调整 CSS 样式，以使搜索按钮与整体风格一致。
- 测试代码在不同浏览器和设备上的兼容性。
总结
通过以上步骤，你可以在 Blogger 的自动完成搜索功能中成功添加一个搜索按钮，从而改善用户体验并提高搜索效率。记住，根据你的具体需求调整代码，并进行充分的测试，以确保其正常运行。
