使用jQuery过滤多个搜索条件

Question

我在JavaScript / jQuery中搜索时遇到问题。例如，如果我选择“两个服务”和“在线状态”，则此功能将返回全部“两个服务”和所有“在线服务”。

期望的行为有3个部分：

1）对于不同的搜索条件添加（即AND而不是OR）。

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

3）从data-name输入不区分大小写

进行#search搜索

$(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

您可以尝试这样的事情：

$(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/

Answer 2

这里的想法是根据过滤条件的值动态构建选择器。我使用一个对象来包含过滤器值，以便我可以迭代它们并重用属性名称，但是你可以这样做但是你喜欢。

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

编辑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