I'm learning web development in particular Nodejs, EJS and JavaScript. I have items I'm calling from a JSON file.
I'm trying to make a search bar that would work with pagination. I want the search bar to find data from the whole file not just the 5 items from pagination.
I have a pagination set so that it shows only 5 items on every page. The current search bar only returns a few results because of the pagination.
I need this for a webpage for Runescape services, its not finished yet. The search bar can be found on www.rsbazar.org/store.ejs?start=0&end=5.
This is my server.js file
var PORT = process.env.PORT;
if (process.env.NODE_ENV !== "production") {
require("dotenv").config();
}
const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
const stripePublicKey = process.env.STRIPE_PUBLIC_KEY;
const express = require("express");
const app = express();
const fs = require("fs");
const stripe = require("stripe")(stripeSecretKey);
const port = process.env.PORT || 5000;
app.set("view engine", "ejs");
app.use(express.json());
app.use(express.static("public"));
app.get("/store", function (req, res) {
fs.readFile("items.json", function (error, data) {
if (error) {
res.status(500).end();
} else {
const paginatedData = {
music: JSON.parse(data).music.slice(req.query.start, req.query.end),
length: JSON.parse(data).music.length,
};
res.render("store.ejs", {
stripePublicKey: stripePublicKey,
items: paginatedData,
});
}
});
});
app.listen(port, () => console.log("listening on port ${port}"));
this is my store.ejs
<!-- input tag -->
<input id="searchbar" onkeyup="search_quest()" type="text"
name="search" placeholder="Search quests.." ">
>
<section class="container content-section">
<h2 class="section-header">Questing</h2>
<div class="shop-items" >
<% items.music.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="Images/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</section>
<section class="container content-section">
<center>
<div style="justify-content: space-between;">
<button onclick="backwardQuery()" class="btn btn-primary">
<<
</button>
<button onclick="forwardQuery()" class="btn btn-primary">
>>
</button>
</div>
</center>
</section>
and this is my JS
// PAGINATION:
let maxLen='<%= items.length %>'
maxLen=parseInt(maxLen);
function forwardQuery(){
let queryParam=new URLSearchParams(window.location.search)
let start=parseInt(queryParam.get('start'));
let end=parseInt(queryParam.get('end'));
start=start+5;
end=end+5;
if(start>=0&&end<=maxLen){
window.location.href=`/store.ejs?start=${start}&end=${end}`
}
}
function backwardQuery(){
let queryParam=new URLSearchParams(window.location.search)
let start=parseInt(queryParam.get('start'));
let end=parseInt(queryParam.get('end'));
start=start-5;
end=end-5;
if(start>=0&&end<=maxLen){
window.location.href=`/store.ejs?start=${start}&end=${end}`
}
}
// SEARCHBAR:
function search_quest() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('shop-item');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
and this is part of JSON file
{
"music": [
{
"id": 1,
"name": "Animal magnetism",
"price": 240,
"imgName": "AM.png"
},
{
"id": 2,
"name": "Another slice of ham",
"price": 210,
"imgName": "ASH.png"
},
{
"id": 3,
"name": "The Ascent of Arceuus",
"price": 190,
"imgName": "AA.png"
},
{
"id": 4,
"name": "Between a Rock",
"price": 240,
"imgName": "Bar.png"
},
{
"id": 5,
"name": "Big Chompy Bird Hunting",
"price": 150,
"imgName": "B.png"
}
]
}