使用 jQuery 过滤多个搜索条件

Question

我在 JavaScript / jQuery 中搜索时遇到问题。例如，如果我选择“双服务”和“在线状态”，则下面的此函数将返回 all“双服务”和所有“在线服务”。

所需的行为有 3 个部分：

1) 不同的搜索条件是 additive（即 AND 而非 OR）。

2) 当搜索条件为空时，返回所有记录。

3) 从#search 输入中进行data-name 搜索不区分大小写

$(document).ready(function() {
  $("#service").change(function(){ select(); });
  $("#search").keyup(function(){ select(); });
  $("#status").change(function(){ select(); });

  select = function(){
    var service = $("#service").val();
    var search = $("#search").val();
    var status = $("#status").val();

    $(".box").hide();

    $(".box[data-service='" + service + "']").show();
    $(".box[data-search='" + search + "']").show();
    $(".box[data-status='" + status + "']").show();

  }

});

示例：https://jsfiddle.net/L7wyp13q/

Answer 1

这里的想法是根据过滤条件的值动态构建选择器。我使用了一个对象来包含过滤器值，以便我可以遍历它们并重用属性名称，但是您可以按照自己的意愿进行操作。

编辑 -- 更新为从搜索字段返回部分匹配，而不仅仅是完全匹配

编辑 2 -- 添加不区分大小写的搜索

$(document).ready(function() {
  $("#service, #status").change(function(){ select(); });
  $("#search").keyup(function(){ select(); });

  select = function(){
    var selectorFilters = {
      service: $("#service").val(),
      status: $("#status").val()
    };

    $(".box").hide();

    var selector = Object.keys(selectorFilters).reduce(function (sel, currentKey) {
      var value = selectorFilters[currentKey];
      if (value && value !== "" && value !== "all") {
        sel += "[data-" + currentKey + "=" + value + "]"; 
      }
      return sel;
    }, ".box"); // <-- start with .box and build from there

    // will select even if search is partial match, rather than only exact match
    $(selector).filter(function (){
      var searchValue = $("#search").val().toLowerCase();
      return (searchValue === "" || $(this).data("name").toLowerCase().indexOf(searchValue) > -1);
    }).show();
  }
});

Working DEMO

Answer 2

你可以试试这样的：

$(document).ready(function() {
    $("#service").change(function() {
      select();
    });
    $("#search").keyup(function() {
      select();
    });
    $("#status").change(function() {
      select();
    });

    select = function() {
      var service = $("#service").val();
      var search = $("#search").val();
      var status = $("#status").val();

      $(".box").hide();
      var boxes = $(".box").filter(function(index) {

        return (service === 'all' || $(this).attr("data-service") === service) &&
          (!search || $(this).attr("data-name").toLowerCase().indexOf(search.toLowerCase()) >= 0 ) &&
          (status === 'all' || $(this).attr("data-status") === status);
      });
      console.log(boxes);
      boxes.show();

    }

  });

小提琴演示：https://jsfiddle.net/xcrmyzgr/2/