JQuery Filter that shows closest li with img

Question

I have a List that contains a lot of list items and I want to create a custom filter which I have almost completed except for one issue. Within the list there are different sections that act as headers and if there are any items under that header then the header list item should be shown as well.

this is the format of the List:

<ul id="forms-list">
   <li><a><img/></a></li> <-----This is a Header
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a><img/></a></li> <-----This is a Header
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
</ul>

If there are no items under that header then the header should stay hidden.

Here is the code that I currently have:

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    $('#forms-list li').hide();
    var $filtered = $('li').filter(function () {
        return rex.test($(this).text());
    });

    $filtered.each(function () {
        $(this).closest("li").has("img").show();
        $(this).show();
    });
});

Answer 1

Could be done more optimally but this probably works without diverging from your original code too much. You would just need to organize the html a little differently if possible. If you have thousands of these to filter, you probably would want to be a little more optimal and concise in searching.

http://jsfiddle.net/7tg39a9x/1/

<input type="text" id="filter" />

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 1</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 2</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 3</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

And with some script

$(function() {
    $('#filter').keyup(function () {
        var rex = new RegExp($(this).val(), 'i');
        $('.filterable li').hide();
        var $filtered = $('li').filter(function () {
            return rex.test($(this).text());
        });

        $filtered.each(function () {
            $(this).show();
            $(this).parent().find('li').first().show();
        });
    });
});

Answer 2

Try this ( demo ):

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    $('#forms-list li').hide();
    var $filtered = $('li').filter(function () {
        return rex.test($(this).text());
    });

    $filtered.each(function () {
        $(this).prevUntil("li:has(img)").prev().show();
        $(this).show();
    });
});