title: jQuery Filter DIVs by class on two events
body: <p>I am trying to set up a filter that will use the input and select to target the results. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="search" id="filter-criteria"&gt;
  &lt;select id="filter-select"&gt;
    &lt;option value="all"&gt;all&lt;/option&gt;
    &lt;option value="red"&gt;red&lt;/option&gt;
    &lt;option value="blue"&gt;blue&lt;/option&gt;
    &lt;option value="purple"&gt;purple&lt;/option&gt;
  &lt;/select&gt;
  &lt;div class="red one girrafe item"&gt;Red One Girrafe&lt;/div&gt;
  &lt;div class="blue two monkey item"&gt;Blue Two Monkey&lt;/div&gt;
  &lt;div class="purple three gorilla item"&gt;Purple Three Gorilla&lt;/div&gt;
  &lt;div class="red three girrafe item"&gt;Red Three Girrafe&lt;/div&gt;
  &lt;div class="green three gorilla item" style="display: none"&gt;Purple Three Gorilla&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>jQuery(document).ready(function() {
      $('#filter-criteria').add('#filter-select').on('keyup change', function() {
          $('.item').hide();
          var txt = $('#filter-criteria').val();
          var select = $('#filter-select').val();
  
          if (select == "all" &amp;&amp; txt == "") {
              $('.item').show();
          } else {
              $('.item').each(function() {
                  if ($(this).is('[class*=' + txt + ']' &amp;&amp; '[class*=' + select + ']')) {
                      $(this).show();
                  }
              });
          }
  
      });
  });
  </code></pre>
  
  <p>At the moment only the select input is working.</p>
  
  <p><a href="https://codepen.io/andew_taylor/full/OvvMLR" rel="nofollow noreferrer">https://codepen.io/andew_taylor/full/OvvMLR</a></p>