首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >实现搜索功能

实现搜索功能
EN

Stack Overflow用户
提问于 2018-11-13 13:47:17
回答 1查看 44关注 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

代码语言:javascript
运行
复制
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();
});

这是我的product.js文件,它能够检索图片中所示的项目。

如何仅使用产品标题进行搜索,以使我的项目项目显示在新网页上?

代码语言:javascript
运行
复制
<!-- 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>
EN

回答 1

Stack Overflow用户

发布于 2018-11-13 13:59:36

如果您使用的是相同的GET url,则过滤该数组。

在新页面中,尝试如下所示。

代码语言:javascript
运行
复制
 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;
          })
      }
    }
  });

编辑:

返回函数GetQueryStringParams(sParam) { var sPageURL = window.location.hash.split("?")1;if (sPageURL ==未定义){

"“} var sURLVariables = sPageURL.split("&");for (var i= 0;i< sURLVariables.length;i++) { var sParameterName = sURLVariablesi.split("=");if (sParameterName == sParam) { return sParameterName1 } }

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53274577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档