将“无结果”添加到搜索/过滤脚本中

Question

yea I know ... another "no results" question ... sorry for that, but i need to ask because i'm fighting with it couple of hours now and preety much nothing works.

I got some script to filter items and I need your help to inject some code to display "no results" message.

$("#my-search-input").keyup(function() {
    var search = $(this).val();
    $(".my-list").children().show();
    if (search)
       $(".my-list").children().not(":containsNoCase(" + search + ")").hide();
});


$.expr[":"].containsNoCase = function (el, i, m) {
    var search = m[3];
    if (!search) return false;
       return new RegExp(search,"i").test($(el).text());
};

Here's my fiddle: http://jsfiddle.net/bk13detv/22/

Basically message should display in every instance of table.

Thanks for your time, cheers.

Answer 1

You could try something like this:

    $("#my-search-input").keyup(function () {
        var search = $(this).val();
        $(".my-list").children().show();
        $('.noresults').remove();
        if (search) {
            $(".my-list").children().not(":containsNoCase(" + search + ")").hide();
            $(".my-list").each(function () {
                if ($(this).children(':visible').length == 0) 
                    $(this).append('<tr class="noresults"><td colspan="3"><em>No Results</em></td></tr>');
            });

        }
    });

See this Fiddle for a demo.