Myujth

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>

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]