title: jquery filter list with header
body: <p>I have some lists and some headings to the lists which I would like to filter through.
  I have done that part already, as you can see in the demo link below. But I have some criteria that I can't figure out.</p>
  
  <ol>
  <li>If the header match's the input by some characters, then show all the children following the <code>&lt;ul&gt;</code></li>
  <li>If header does NOT match the input by some characters, but some of the items in the <code>&lt;ul&gt;</code> does, then show the <code>&lt;li&gt;</code> that does, and also show the header</li>
  <li>if neither the header or following <code>&lt;ul&gt;</code> match the input by some characters, hide both the header and items in following <code>&lt;ul&gt;</code></li>
  </ol>
  
  <hr>
  
  <pre><code>jQuery(function() {
      var listFilter = {
          init: function(header, list) {
              $('.filterdrp_input')
              .change( function () {
                  var filter = this.value.trim();
  
                  if(filter) {                            
                      myFilter(header);
                      myFilter(list);
  
                      function myFilter(selector) {
                          $(selector).find('[data-name]').hide()
                          .filter('[data-name*="'+ filter +'"]')
                          .show();    
                      }
                  } 
                  else {
                      $(header).find("span").show();
                      $(list).find("li").show();
                  }
                  return false;
              })
              .keyup( function () {           
                  $(this).change();
              });
  
          }
      }
  
      listFilter.init($(".list-header"), $('.filterdrp').find('ul'));
  
  });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div class="filterdrp"&gt;
  &lt;input type="text" placeholder="search" class="filterdrp_input"&gt;
  
  &lt;h2 class="list-header"&gt;
      &lt;span data-name="name_01"&gt;
          name_01 
      &lt;/span&gt;
  &lt;/h2&gt;
  &lt;ul class="list"&gt;
      &lt;li class="list__item" data-name="item_01"&gt;
          item_01
      &lt;/li&gt;
      &lt;li class="list__item" data-name="item_02"&gt;
          item_02
      &lt;/li&gt;
      &lt;li class="list__item" data-name="item_03"&gt;
          item_03
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2 class="list-header"&gt;
      &lt;span data-name="name_02"&gt;
          name_2  
      &lt;/span&gt;
  &lt;/h2&gt;
  &lt;ul class="list"&gt;
      &lt;li class="list__item" data-name="item_06"&gt;
          item_06
      &lt;/li&gt;
      &lt;li class="list__item" data-name="item_07"&gt;
          item_07
      &lt;/li&gt;
      &lt;li class="list__item" data-name="item_08"&gt;
          item_08
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/x2oshad5/" rel="nofollow">demo</a></p>
  
  <p>I have updated my solution, So here is the final working example
  <a href="http://jsfiddle.net/x2oshad5/6/" rel="nofollow">http://jsfiddle.net/x2oshad5/6/</a></p>