Question

我有一个带有搜索过滤器和下拉过滤器的画廊。我的问题是，当我使用搜索时，它会忽略下拉菜单，反之亦然。

我希望能够通过在搜索中键入15岁以下的年龄来过滤图库，然后按级别初学者，性别-女性和老师的名字-liz进一步过滤。

因此，结果应显示15岁的女学生，初学者和liz学生。

下拉菜单可以无缝地协同工作，这意味着我可以按级别，性别和老师进行过滤。但是，如果我想使用搜索栏，它将重置并且仅按我输入的内容进行搜索，在此示例中为年龄。

HTML：

DelegatingHandler

JAVASCRIPT：

moongose.connection.useDb( organizationDB )

Answer 1

这就是我将文本搜索放在updateStudents()函数中的意思。如您所见，它的编写方式与其他过滤器完全相同，只是过滤器逻辑不同。

你是如此亲密。希望这会有所帮助。

$("select.level, select.gender, select.teachers").change(updateStudents);
$("#myInput").on("keyup", updateStudents);

function updateStudents() {
  var level = $('select.level').val();
  var gender = $('select.gender').val();
  var teachers = $('select.teachers').val();
  var search = $("#myInput").val();

  $('.FilterContainer')
    .find('.column')
    .hide()
    .filter(function() {
      var okLevel = true;
      var okGender = true;
      var okTeachers = true;
      var okSearch = true;

      if (level !== "all") {
        okLevel = $(this).attr('data-level') === level;
      }
      if (gender !== "all") {
        okGender = $(this).attr('data-gender') === gender;
      }
      if (teachers !== "all") {
        okTeachers = $(this).attr('data-teacher') === teachers;
      }
      if (search !== '') {
        okSearch = $(this).text().toLowerCase().indexOf(search) > -1;
      }
      //only fade a room if it satisfies all four conditions
      return okLevel && okGender && okTeachers && okSearch;
    }).fadeIn('fast');
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>JS Bin</title>
  <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script defer src="script.js"></script>
</head>

<body>
  <div class="container-fluid dashboard">
    <!--TITLE -->
    <div class="title container row">
      <div class="col-sm-12">
        <h1 class="heading">Your Dancers</h1>
      </div>
    </div>
    <div class="row container" style="margin: auto;">
      <div class="col-sm-4">
        <input type="text" id="myInput" placeholder="Search by name, age, level, etc.." />
      </div>
      <div class="col-sm-2"></div>
      <div class="col-sm-2 " style="text-align: right;">
        <select class="level">
          <option value="all">All Levels</option>
          <option value="Pre-Beginner"> Pre-Beginner (1)</option>
          <option value="Beginner"> Beginner (1)</option>
          <option value="Novice"> Novice (3)</option>
          <option value="Prize Winner"> Prize Winner (3)</option>
          <option value="Prelim Champion"> Prelim Champion (1)</option>
          <option value="Open Champion"> Open Champion (3)</option>
        </select>
      </div>
      <div class="col-sm-2 " style="text-align: right;">
        <select class="gender">
          <option value="all">All Genders</option>
          <option value="Female"> Female</option>
          <option value="Male"> Male</option>
        </select>
      </div>
      <div class="col-sm-2 " style="text-align: right;">
        <select class="teachers">
          <option value="all">All Teachers</option>
          <option value="Mike"> Mike</option>
          <option value="Mr. Alpha"> Mr. Alpha</option>
          <option value="Ms. Lee"> Ms. Lee</option>
          <option value="Liz"> Liz</option>
        </select>
      </div>
    </div>
    <!--DANCER GALLERY-->
    <div class="row container FilterContainer" style="margin: auto; margin-bottom: 2rem;">
      <div class="col-sm-3 column" data-level="Novice" data-teacher="Liz" data-gender="Female">
        <a href="dancerProfile?id=1" class="link">
          <div class="content">
            <img src="uploads/profile-icon.png" alt="Lace" style="width:80%; height: 170px;" />
            <h4>Lace - Novice</h4>
            <p>Age: 14, teacher: Liz</p>
          </div>
        </a>
      </div>
      <div class="col-sm-3 column" data-level="Novice" data-teacher="Mr. Alpha" data-gender="Female">
        <a href="dancerProfile?id=3" class="link">
          <div class="content">
            <img src="uploads/1782517_575923289159969_1857743309_o.jpg" alt="Rhea" style="width:80%; height: 170px;" />
            <h4>Rhea - Novice</h4>
            <p>Age: 5, teacher: Mr. Alpha</p>
          </div>
        </a>
      </div>
      <div class="col-sm-3 column" data-level="Open Champion" data-teacher="Ms. Lee" data-gender="Female">
        <a href="dancerProfile?id=48" class="link">
          <div class="content">
            <img src="imgs/profile-icon%20(1).png" alt="Isabelle" style="width:80%; height: 170px;" />
            <h4>Isabelle - Open Champion</h4>
            <p>Age: 15, teacher: Ms. Lee</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

如何使搜索过滤器和下拉过滤器协同工作

1 个答案: