making a search functionality
so the picture shown is what i have, i want to make a search functionality with the corresponding 4 items on the right
const itemListHTML = `
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew" id="itemLabel">
<img alt="IMG-PRODUCT" id="itemImage">
</div>
<div class="block2-txt p-t-20">
<a href="javascript:void(0);" class="block2-name dis-block s-text3 p-b-5" onclick="getItemDetails(event)">
<span id="itemId" hidden></span><span id="itemTitle"></span>
</a>
<span class="block2-price m-text6 p-r-5">
$<span id="itemPrice"></span>
</span>
</div>
</div>
</div>
`;
function getitems() {
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
res.data.rows.forEach(row => {
const $itemList = $(itemListHTML);
$itemList.find("#itemImage").attr("src", row.picture);
$itemList.find("#itemId").text(row.item_id);
$itemList.find("#itemTitle").text(row.title);
$itemList.find("#itemPrice").text(row.price);
if (row.sale == true) {
$itemList
.find("#itemLabel")
.removeClass("block2-labelnew")
.addClass("block2-labelsale");
}
$("#item-list").append($itemList);
});
}
}
});
}
function getItemDetails(event) {
const itemId = $(event.target)
.siblings("span")
.text();
window.location.href = "/product-detail.html?itemid=" + itemId;
}
$(document).ready(function(e) {
getitems();
});
this is my product.js file which is able to retireve the items as shown in the picture.
how do i seacrch using just the title of the product to get my items item display on a new webpage
<!-- search button -->
<div class="search-product pos-relative bo4 of-hidden">
<input class="s-text7 size6 p-l-23 p-r-50" type="text" name="search-product" placeholder="Search Products...">
<button class="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
<i class="fs-12 fa fa-search" aria-hidden="true"></i></button>
</div>
<!-- search button end here -->
<!-- Product -->
<div class="row" id="item-list"></div>
javascript node.js postgresql heroku
add a comment |
so the picture shown is what i have, i want to make a search functionality with the corresponding 4 items on the right
const itemListHTML = `
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew" id="itemLabel">
<img alt="IMG-PRODUCT" id="itemImage">
</div>
<div class="block2-txt p-t-20">
<a href="javascript:void(0);" class="block2-name dis-block s-text3 p-b-5" onclick="getItemDetails(event)">
<span id="itemId" hidden></span><span id="itemTitle"></span>
</a>
<span class="block2-price m-text6 p-r-5">
$<span id="itemPrice"></span>
</span>
</div>
</div>
</div>
`;
function getitems() {
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
res.data.rows.forEach(row => {
const $itemList = $(itemListHTML);
$itemList.find("#itemImage").attr("src", row.picture);
$itemList.find("#itemId").text(row.item_id);
$itemList.find("#itemTitle").text(row.title);
$itemList.find("#itemPrice").text(row.price);
if (row.sale == true) {
$itemList
.find("#itemLabel")
.removeClass("block2-labelnew")
.addClass("block2-labelsale");
}
$("#item-list").append($itemList);
});
}
}
});
}
function getItemDetails(event) {
const itemId = $(event.target)
.siblings("span")
.text();
window.location.href = "/product-detail.html?itemid=" + itemId;
}
$(document).ready(function(e) {
getitems();
});
this is my product.js file which is able to retireve the items as shown in the picture.
how do i seacrch using just the title of the product to get my items item display on a new webpage
<!-- search button -->
<div class="search-product pos-relative bo4 of-hidden">
<input class="s-text7 size6 p-l-23 p-r-50" type="text" name="search-product" placeholder="Search Products...">
<button class="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
<i class="fs-12 fa fa-search" aria-hidden="true"></i></button>
</div>
<!-- search button end here -->
<!-- Product -->
<div class="row" id="item-list"></div>
javascript node.js postgresql heroku
add a comment |
so the picture shown is what i have, i want to make a search functionality with the corresponding 4 items on the right
const itemListHTML = `
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew" id="itemLabel">
<img alt="IMG-PRODUCT" id="itemImage">
</div>
<div class="block2-txt p-t-20">
<a href="javascript:void(0);" class="block2-name dis-block s-text3 p-b-5" onclick="getItemDetails(event)">
<span id="itemId" hidden></span><span id="itemTitle"></span>
</a>
<span class="block2-price m-text6 p-r-5">
$<span id="itemPrice"></span>
</span>
</div>
</div>
</div>
`;
function getitems() {
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
res.data.rows.forEach(row => {
const $itemList = $(itemListHTML);
$itemList.find("#itemImage").attr("src", row.picture);
$itemList.find("#itemId").text(row.item_id);
$itemList.find("#itemTitle").text(row.title);
$itemList.find("#itemPrice").text(row.price);
if (row.sale == true) {
$itemList
.find("#itemLabel")
.removeClass("block2-labelnew")
.addClass("block2-labelsale");
}
$("#item-list").append($itemList);
});
}
}
});
}
function getItemDetails(event) {
const itemId = $(event.target)
.siblings("span")
.text();
window.location.href = "/product-detail.html?itemid=" + itemId;
}
$(document).ready(function(e) {
getitems();
});
this is my product.js file which is able to retireve the items as shown in the picture.
how do i seacrch using just the title of the product to get my items item display on a new webpage
<!-- search button -->
<div class="search-product pos-relative bo4 of-hidden">
<input class="s-text7 size6 p-l-23 p-r-50" type="text" name="search-product" placeholder="Search Products...">
<button class="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
<i class="fs-12 fa fa-search" aria-hidden="true"></i></button>
</div>
<!-- search button end here -->
<!-- Product -->
<div class="row" id="item-list"></div>
javascript node.js postgresql heroku
so the picture shown is what i have, i want to make a search functionality with the corresponding 4 items on the right
const itemListHTML = `
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew" id="itemLabel">
<img alt="IMG-PRODUCT" id="itemImage">
</div>
<div class="block2-txt p-t-20">
<a href="javascript:void(0);" class="block2-name dis-block s-text3 p-b-5" onclick="getItemDetails(event)">
<span id="itemId" hidden></span><span id="itemTitle"></span>
</a>
<span class="block2-price m-text6 p-r-5">
$<span id="itemPrice"></span>
</span>
</div>
</div>
</div>
`;
function getitems() {
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
res.data.rows.forEach(row => {
const $itemList = $(itemListHTML);
$itemList.find("#itemImage").attr("src", row.picture);
$itemList.find("#itemId").text(row.item_id);
$itemList.find("#itemTitle").text(row.title);
$itemList.find("#itemPrice").text(row.price);
if (row.sale == true) {
$itemList
.find("#itemLabel")
.removeClass("block2-labelnew")
.addClass("block2-labelsale");
}
$("#item-list").append($itemList);
});
}
}
});
}
function getItemDetails(event) {
const itemId = $(event.target)
.siblings("span")
.text();
window.location.href = "/product-detail.html?itemid=" + itemId;
}
$(document).ready(function(e) {
getitems();
});
this is my product.js file which is able to retireve the items as shown in the picture.
how do i seacrch using just the title of the product to get my items item display on a new webpage
<!-- search button -->
<div class="search-product pos-relative bo4 of-hidden">
<input class="s-text7 size6 p-l-23 p-r-50" type="text" name="search-product" placeholder="Search Products...">
<button class="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
<i class="fs-12 fa fa-search" aria-hidden="true"></i></button>
</div>
<!-- search button end here -->
<!-- Product -->
<div class="row" id="item-list"></div>
javascript node.js postgresql heroku
javascript node.js postgresql heroku
asked Nov 13 '18 at 5:47
jack99jackjack99jack
62
62
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If you are using same GET url then filter the array.
In new page try something like this.
itemid=GetQueryStringParams("itemid");
var selectedRow;
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
var rows=res.data.rows;
selectedRow=rows.filter(function(el) {
return el["title"]==itemid;
})
}
}
});
EDIT :
function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274577%2fmaking-a-search-functionality%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you are using same GET url then filter the array.
In new page try something like this.
itemid=GetQueryStringParams("itemid");
var selectedRow;
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
var rows=res.data.rows;
selectedRow=rows.filter(function(el) {
return el["title"]==itemid;
})
}
}
});
EDIT :
function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
add a comment |
If you are using same GET url then filter the array.
In new page try something like this.
itemid=GetQueryStringParams("itemid");
var selectedRow;
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
var rows=res.data.rows;
selectedRow=rows.filter(function(el) {
return el["title"]==itemid;
})
}
}
});
EDIT :
function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
add a comment |
If you are using same GET url then filter the array.
In new page try something like this.
itemid=GetQueryStringParams("itemid");
var selectedRow;
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
var rows=res.data.rows;
selectedRow=rows.filter(function(el) {
return el["title"]==itemid;
})
}
}
});
EDIT :
function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
If you are using same GET url then filter the array.
In new page try something like this.
itemid=GetQueryStringParams("itemid");
var selectedRow;
$.ajax({
method: "GET",
url: "/items",
success: res => {
if (res.success == 0) handle_error(res.error);
else {
var rows=res.data.rows;
selectedRow=rows.filter(function(el) {
return el["title"]==itemid;
})
}
}
});
EDIT :
function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
edited Nov 13 '18 at 7:54
answered Nov 13 '18 at 5:59
Dilip BelgumpiDilip Belgumpi
633313
633313
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
add a comment |
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
how will i take the input from the form and compare it to get the results once i click the button
– jack99jack
Nov 13 '18 at 7:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274577%2fmaking-a-search-functionality%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown