Add & Remove element IF class has x style...not working properly

Question

I'm using a jquery quick search plugin (https://github.com/riklomas/quicksearch) which filters a list based upon the data entered into an input field.

If there's no results returned, I want to display a message saying so.

The quick search plugin adds display: none to all list elements that aren't to be shown.

Therefore, I tried this:

        // load jquery.quicksearch
        $('#search').parent().css('display','block').end().quicksearch('#ul'+id+' li');

        // show / hide message
        $("input#search").keypress(function() {
                li = $('.category li');                 
                if (li.css('display') == 'none') {
                    $('body').append('<div id="noContent">no content</div>');
                } else { 
                    $('#noContent').remove();
                }
        });

The result is a very twitchy / buggy solution. Some times it doesn't append the message even if all li items have display: none. It also doesn't even remove the no content message even when there ARE list items visible.

Any ideas?

Answer 1

Read the docs: you don't need to do what you're doing.

Simply use the noResults option.

Their example:

$('input#search').quicksearch('table tbody tr', {
    'delay': 100,
    'selector': 'th',
    'stripeRows': ['odd', 'even'],
    'loader': 'span.loading',
    'noResults': 'tr#noresults',
    .......

looks like you would want 'noResults': '#noContent'