I'm having problem in one issue. Blogger autocomplete search. I'm novice in programming. I want to add a button in the bottom which will work as a search submit / action button.
Here's my code:
<style type="text/css">
#searchForm {
display: inline-block;
position: relative;
width: 500px;
}
#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: 60px;
border: 1px solid #e0e0e0;
border-radius: 0 2px 2px 0;
background: rgb(230, 230, 230);
cursor: pointer;
position: absolute;
top: 10px;
outline: 0;
line-height: 27px;
}
#searchForm button svg {
vertical-align: middle;
width: 21px;
height: 21px;
}
.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">
<input autocomplete="off" name="q" placeholder="Search" value="" />
</form>
<ul id="rslt" ></ul>
<button >×</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;
i < 10 && $(".results").append(mk_list_dom(postUrl,
postTitle));
i > 9 && seeMoreArr.push({ postUrl, postTitle });
}
/*
data.feed.entry.length > 9 &&
$(".results").append(
'<div > <div ></div> <button >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();
});
});
//]]>
</script>
I want to add a button at the bottom of result div or section, which Will work as submit / search button. By clicking people can go to search results.
If anyone know, please help me.
CodePudding user response：
You can show the code with snippets so people can better understand your question.
As for your question, the code that adds a button is already available where you shared it. It was a script that memorized after 9 recordings and added the results when you said show more. You put it in the comment line. With a small change, you can update it as a button that leads to the page you want as follows.
//<![CDATA[
$(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 > <div ></div> <button >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 > <div ></div> <button >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 {
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:absolute;top:50px;width:500px;">
<form id="searchForm" action="/search">
<input autocomplete="off" name="q" placeholder="Search" value="" />
<button >×</button>
</form>
<ul id="rslt" ></ul>
</div>