jquery.filterChildren.js Demo

https://github.com/sinky/jquery.filterChildren.js

by sinky

HTML

HTML Data from <a href="https://my-azur.de" target="_blank">my-azur.de</a>

<p><input id="m" placeholder="Custom Input" /></p>

<ul class="filter" style="">
    <li><a href="https://my-azur.de/brain/rezepte/amicelli-torte" title="rezepte:amicelli-torte">Amicelli Torte</a><sup class="only-print">[1]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/apfelkuchen-mit-butterstreusel" title="rezepte:apfelkuchen-mit-butterstreusel">Apfelkuchen mit Butterstreusel</a><sup class="only-print">[2]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/backmischnung-brownie" title="rezepte:backmischnung-brownie">Backmischnung für Brownies</a><sup class="only-print">[3]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/butterplaetzchen" title="rezepte:butterplaetzchen">Butterplätzchen</a><sup class="only-print">[4]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/cordon-bleu" title="rezepte:cordon-bleu">Cordon Bleu</a><sup class="only-print">[5]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/dalmatiner-kuchen" title="rezepte:dalmatiner-kuchen">Dalmatiner Kuchen</a><sup class="only-print">[6]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/erdbeer-yogurette-torte" title="rezepte:erdbeer-yogurette-torte">Erdbeer Yogurette Torte</a><sup class="only-print">[7]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/erdbeercreme" title="rezepte:erdbeercreme">Erdbeercreme</a><sup class="only-print">[8]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/flockentorte-mit-himbeersahne" title="rezepte:flockentorte-mit-himbeersahne">Flockentorte mit Himbeersahne</a><sup class="only-print">[9]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/griesspudding" title="rezepte:griesspudding">Grießpudding</a><sup class="only-print">[10]</sup>

    </li>
    <li><a href="https://my-azur.de/brain/rezepte/hamburger"...

CSS

.filtered {
    display: none;
}

#m {
    border-radius: 5px;
    padding: 5px;
    border: solid #ccc 1px;
}

JavaScript

(function ($) {
    $.fn.filterChildren = function (options) {
        var settings = $.extend({
            childSelector: "> *",
            filterClass: 'filtered'
        }, options);

        $(this).each(function () {
            var $thisInput;
            var $this = $(this);//.addClass("datasource");
            
            $this.wrap("<div class='filterChildren'></div>");

            if(settings.$filterInput instanceof $){
              $thisInput = settings.$filterInput;//.keyup(filterFuntion);
            }else{
              $thisInput = $('<input type="text" placeholder="Filter" class="filter" />').insertBefore($this);
            }

            var filterFuntion = function () {
              $this.find(settings.childSelector).removeClass(settings.filterClass).filter(function (index) {
                  return $(this).text().toLowerCase().indexOf($thisInput.val().toLowerCase()) === -1;
              }).addClass(settings.filterClass);
            };
            
            $thisInput.keyup(filterFuntion);
        });
        return this;
    };
}(jQuery));

$('ul').filterChildren({
    $filterInput: $('#m')
});

$('table').filterChildren({
    childSelector: 'tr:not(:has(th))' // tr that :not :has th children
});