title: Jquery - text filter to hide divs
body: <p>I'm trying to use jquery to to create a live filter to hide divs on realtime text input. So far I have the following:</p>
  
  <pre><code>&lt;input type="text" class="form-control" id="filter" name="filter" class="filter"&gt;
  &lt;div class="media"&gt;
      &lt;div class="media-body&gt;
          &lt;h4&gt;Apples&lt;/h4&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="media"&gt;
      &lt;div class="media-body&gt;
          &lt;h4&gt;Oranges&lt;/h4&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $('#filter').keyup(function () { 
          var filter = $("#filter").val();
          $('.media').each(function(i, obj) {
              if ($('this &gt; .media-body &gt; h4:contains(filter)').length === 0) {
                  $(this).css("display","none");
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I want this to work so that as soon as someone types an 'o' the apples div is hidden but currently it hides all the divs as soon as anything is typed.</p>
  
  <p>Also how can I make it case insensitive?</p>