javascript - 使用 jQuery 根据多个搜索条件进行过滤

Question

我在 JavaScript/jQuery 中进行搜索时遇到问题。例如，如果我选择“两项服务”和“在线状态”，下面的函数将返回全部“两项服务”和全部“在线服务”。

所需的行为由 3 部分组成:

1) 不同的搜索条件可以相加(即 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

你可以尝试这样的事情:

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

    }

  });

fiddle 演示:https://jsfiddle.net/xcrmyzgr/2/