title: How to make search filter and dropdown filter work together Javascript
body: <p>I have a gallery with search filter and drop down filter. The problem I have is that when I use the search it disregards the dropdowns and vice versa. </p>
  
  <p>I want to be able to filter the gallery by typing in the search a age-15, then further filtering by level-beginner and gender-female and teacher name - liz.</p>
  
  <p>So the result should show students who are female, age 15, a beginner, and student of liz.</p>
  
  <p>The dropdowns work seamlessly together meaning I can get it to filter by level, gender, and teacher. But if I want to use the search bar it resets and only searching by whatever I input, in this example being the age.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container-fluid dashboard"&gt;
        &lt;!--TITLE --&gt;
        &lt;div class="title container row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;h1 class="heading"&gt;Your Dancers&lt;/h1&gt; 
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row container" style="margin: auto;"&gt;
            &lt;div class="col-sm-4"&gt;
                &lt;input type="text" id="myInput" placeholder="Search by name, age, level, etc.."&gt;
            &lt;/div&gt;
  
  
  
  
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
  
            &lt;div class="col-sm-2 " style="text-align: right;"&gt;
                &lt;select class="level"&gt;
                   &lt;option value="all"&gt;All Levels&lt;/option&gt;
                    &lt;option value="Pre-Beginner"&gt; Pre-Beginner (1)&lt;/option&gt;
                    &lt;option value="Beginner"&gt; Beginner (1)&lt;/option&gt;
                    &lt;option value="Novice"&gt; Novice (3)&lt;/option&gt;
                    &lt;option value="Prize Winner"&gt; Prize Winner (3)&lt;/option&gt;
                    &lt;option value="Prelim Champion"&gt; Prelim Champion (1)&lt;/option&gt;
                    &lt;option value="Open Champion"&gt; Open Champion (3)&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div class="col-sm-2 " style="text-align: right;"&gt;
                &lt;select class="gender"&gt;
                    &lt;option value="all"&gt;All Genders&lt;/option&gt;
                    &lt;option value="Female"&gt; Female&lt;/option&gt;
                    &lt;option value="Male"&gt; Male&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
  
  
  
            &lt;div class="col-sm-2 " style="text-align: right;"&gt;
                &lt;select class="teachers"&gt;
                    &lt;option value="all"&gt;All Teachers&lt;/option&gt;
  
                    &lt;option value="Mike" &gt; Mike&lt;/option&gt;
  
                    &lt;option value="Mr. Alpha" &gt; Mr. Alpha&lt;/option&gt;
  
                    &lt;option value="Ms. Lee" &gt; Ms. Lee&lt;/option&gt;
  
                    &lt;option value="Liz" &gt; Liz&lt;/option&gt;
                                      &lt;/select&gt;
            &lt;/div&gt;
  
        &lt;/div&gt;
  
  
        &lt;!--DANCER GALLERY--&gt;
        &lt;div class="row container FilterContainer" style="margin: auto; margin-bottom: 2rem;"&gt;
  
  
            &lt;div class="col-sm-3 column" data-level="Novice" data-teacher="Liz" data-gender="Female"&gt;
                &lt;a href="dancerProfile?id=1" class="link"&gt;
                    &lt;div class="content"&gt;
                        &lt;img src="uploads/profile-icon.png" alt="Lace" style="width:80%; height: 170px;"&gt;
                        &lt;h4&gt;Lace - Novice&lt;/h4&gt;
                        &lt;p&gt;Age: 14, teacher: Liz&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-sm-3 column" data-level="Novice" data-teacher="Mr. Alpha" data-gender="Female"&gt;
                &lt;a href="dancerProfile?id=3" class="link"&gt;
                    &lt;div class="content"&gt;
                        &lt;img src="uploads/1782517_575923289159969_1857743309_o.jpg" alt="Rhea" style="width:80%; height: 170px;"&gt;
                        &lt;h4&gt;Rhea - Novice&lt;/h4&gt;
                        &lt;p&gt;Age: 5, teacher: Mr. Alpha&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-sm-3 column" data-level="Open Champion" data-teacher="Ms. Lee" data-gender="Female"&gt;
                &lt;a href="dancerProfile?id=48" class="link"&gt;
                    &lt;div class="content"&gt;
                        &lt;img src="imgs/profile-icon%20(1).png" alt="Isabelle" style="width:80%; height: 170px;"&gt;
                        &lt;h4&gt;Isabelle - Open Champion&lt;/h4&gt;
                        &lt;p&gt;Age: 15, teacher: Ms. Lee&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
  
  
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT:</strong></p>
  
  <pre><code>  //SEARCH FILTER
  
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $(".column").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
    });
  });
  
  
  //call the same function for each select's change event
  $("select.level, select.gender, select.teachers").change(updateStudents);
  
  function updateStudents() {
  //get all the values
    var level = $('select.level').val();
    var gender = $('select.gender').val();
    var teachers = $('select.teachers').val();
  
    $('.FilterContainer')
    .find('.column')
    .hide()
    .filter(function () {
      var okLevel = true;
      if(level !== "all"){
        var okLevel = $(this).attr('data-level') === level;
      }
  
  
      var okGender = true;
      if(gender !== "all"){
        okGender = $(this).attr('data-gender') === gender;
      }
  
      var okTeachers = true;
      if(teachers !== "all"){
        okTeachers = $(this).attr('data-teacher') === teachers;
      }
  
     //only fade a room if it satisfies all three conditions
      return okLevel &amp;&amp; okGender &amp;&amp; okTeachers;
    }).fadeIn('fast');
  }
  });
  </code></pre>