Ndtyjky

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]

        }

    }

}