Question

我希望在搜索和类别过滤器中按类型进行产品过滤。

以下是过滤器导航：

<div id="sortFunction">
  <label id="search">
    <input oninput="w3.filterHTML('#listProductWrapper', '.product', this.value);" placeholder="Search Here..." id="querySearch">
  </label>
  <div id="cateListContainer">
    <h2 class="in">Categories</h2>
    <input type="radio" name="cate" id="cateRadioAll" value="all" checked onclick="cateFilter(this.value);">
    <label for="cateRadioAll">All</label>
    <input type="radio" name="cate" id="cateRadioNewBorn" value="newborn" onclick="cateFilter(this.value);">
    <label for="cateRadioNewBorn">New Born</label>
    <input type="radio" name="cate" id="cateRadioValentine" value="valentine" onclick="cateFilter(this.value);">
    <label for="cateRadioValentine">Valentine</label>
    <input type="radio" name="cate" id="cateRadioFlower" value="flower" onclick="cateFilter(this.value);">
    <label for="cateRadioFlower">Flower</label>
    <input type="radio" name="cate" id="cateRadioFestival" value="festival" onclick="cateFilter(this.value);">
    <label for="cateRadioFestival">Festival</label>
    <input type="radio" name="cate" id="cateRadioSales" value="sales" onclick="cateFilter(this.value);">
    <label for="cateRadioSales">Sales</label>
  </div>
</div>

以下是产品内容：

<div id="listProductWrapper">
  <div class="product all newborn">
    <div class="productImg" id="productImg01"></div>
    <div class="productName">Pig (Deluxe)</b></div>
    <div class="productPrice">300</div>
  </div>
  <div class="product all newborn sales">
    <div class="productImg" id="productImg02"></div>
    <div class="productName">Pig (Normal)</b></div>
    <div class="productPrice">200</div>
  </div>
  <div class="product all newborn">
    <div class="productImg" id="productImg03"></div>
    <div class="productName">Shoes</div>
    <div class="productPrice">239</div>
  </div>
  <div class="product all flower">
    <div class="productImg" id="productImg04"></div>
    <div class="productName">Flower x14pcs</div>
    <div class="productPrice">9999</div>
  </div>
  <div class="product all valentine flower">
    <div class="productImg" id="productImg05"></div>
    <div class="productName">Valentine Flower</div>
    <div class="productPrice">500</div>
  </div>
  <div class="product all festival sales">
    <div class="productImg" id="productImg06"></div>
    <div class="productName">Limited Edition</div>
    <div class="productPrice">***</div>
  </div>
</div>

我使用w3.js过滤功能将用户类型过滤到搜索栏中。但我修改了一些代码，到目前为止它是有效的！

w3.filterHTML = function(id, sel, filter) {
  var a, b, c, i, ii, iii, hit;
  a = w3.getElements(id);
  for (i = 0; i < a.length; i++) {
    b = w3.getElements(sel);
    for (ii = 0; ii < b.length; ii++) {
      hit = 0;
      if (b[ii].textContent.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
        hit = 1;
      }
      c = b[ii].getElementsByTagName("*");
      for (iii = 0; iii < c.length; iii++) {
        if (c[iii].textContent.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
          hit = 1;
        }
      }
      if (hit == 1) {
        b[ii].style.display = "";
      } else {
        b[ii].style.display = "none";
      }
    }
  }
};

让所有产品都有类.all，（.product用于css）。单选按钮具有与每个类别相关的值。通常，如果用户单击单选按钮，将运行：

var cateFilter = function(filter) {
  $(".all").hide();
  $("." + filter).show();
};

在搜索栏中无效。如果搜索栏有值，则运行此功能，搜索/过滤功能中的类型将不起作用。只是可以按类别排序。但点击类别单选按钮后，用户会更改搜索输入，类别和按类型搜索将一起工作。

在我的情况下，是如何使用户已经在搜索过滤器中输入某些文本进行搜索的功能，然后他们也点击类别的单选按钮来过滤类别，我希望该功能可以用于过滤类别并输入搜索过滤。

非常感谢！

如何同时使用搜索过滤和类别过滤

0 个答案: