making a search functionality












0















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>









share|improve this question



























    0















    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>









    share|improve this question

























      0












      0








      0








      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>









      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 13 '18 at 5:47









      jack99jackjack99jack

      62




      62
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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]
          }
          }
          }






          share|improve this answer


























          • 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











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          0














          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]
          }
          }
          }






          share|improve this answer


























          • 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
















          0














          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]
          }
          }
          }






          share|improve this answer


























          • 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














          0












          0








          0







          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]
          }
          }
          }






          share|improve this answer















          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]
          }
          }
          }







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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



















          • 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


















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Full-time equivalent

          さくらももこ

          13 indicted, 8 arrested in Calif. drug cartel investigation