title: jQuery search filter show the list item header
body: <p>I have following list</p>
  
  <pre><code>&lt;ul id="fromList"&gt;
      &lt;li class="header"&gt;-ABC-&lt;/li&gt;
      &lt;li class="item"&gt;123&lt;/li&gt;
      &lt;li class="item"&gt;258&lt;/li&gt;
      &lt;li class="item"&gt;189&lt;/li&gt;
      &lt;li class="item"&gt;545&lt;/li&gt;
  
      &lt;li class="header"&gt;-CDE-&lt;/li&gt;
      &lt;li class="item"&gt;789&lt;/li&gt;
      &lt;li class="item"&gt;215&lt;/li&gt;
      &lt;li class="item"&gt;897&lt;/li&gt;
      &lt;li class="item"&gt;999&lt;/li&gt;
  
      &lt;li class="header"&gt;-EFG-&lt;/li&gt;
      &lt;li class="item"&gt;701&lt;/li&gt;
      &lt;li class="item"&gt;566&lt;/li&gt;
      &lt;li class="item"&gt;511&lt;/li&gt;       
  &lt;/ul&gt;
  </code></pre>
  
  <p>When searching the item it should show the list item header<br />
  For example when i am searching '9'<br />
  It should show<br /> </p>
  
  <ul>
  <li>-ABC- </li>
  <li>189</li>
  <li>-CDE- </li>
  <li>789 </li>
  <li>897 </li>
  <li>999
  <br /></li>
  </ul>
  
  <p>Now I am getting search list only:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function filter(element) {
    var value = $(element).val();
    $("#fromList li").each(function() {
      if ($(this).text().search(new RegExp(value, "i")) &gt; -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type='text' id='txtList' onkeyup="filter(this)" /&gt;
  &lt;ul id="fromList"&gt;
    &lt;li class="header"&gt;ABC&lt;/li&gt;
    &lt;li class="item"&gt;123&lt;/li&gt;
    &lt;li class="item"&gt;258&lt;/li&gt;
    &lt;li class="item"&gt;189&lt;/li&gt;
    &lt;li class="item"&gt;545&lt;/li&gt;
  
    &lt;li class="header"&gt;CDE&lt;/li&gt;
    &lt;li class="item"&gt;789&lt;/li&gt;
    &lt;li class="item"&gt;215&lt;/li&gt;
    &lt;li class="item"&gt;897&lt;/li&gt;
    &lt;li class="item"&gt;999&lt;/li&gt;
  
    &lt;li class="header"&gt;E&lt;/li&gt;
    &lt;li class="item"&gt;701&lt;/li&gt;
    &lt;li class="item"&gt;566&lt;/li&gt;
    &lt;li class="item"&gt;511&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>