CODEWITHSUNDEEP
jquery-mobile
Daniel
Daniel

Reputation: 1402

jQueryMobile: How to get visible items after user filtered a list

I'm using listviews with filter and i'd like to get list of visible items right after user defined filter.

Is there a way to do it, preferably w/o filterCallback implementation?

Upvotes: 0

Views: 366

Answers (1)

ezanker
ezanker

Reputation: 24738

UPDATE: Now returns visible LI as you type in the filter box.

Here is a DEMO FIDDLE

The filtered-out items are hidden with a class of ui-screen-hidden, therefore you just need to select all LI that don't have that class

$('#TheList li:not(.ui-screen-hidden)');

#TheList is an ID I added to the UL so that jQuery only searches within the specific UL, then we look for all LI within the UL that do not have the class. Here is the API Doc for the Not selector: http://api.jquery.com/not-selector/

To catch the changes as the user type, on page show I add the 'input' event to the search box. The selector finds the input within the jQM created form inside the container div of the UL.

$('#page1').on("pageshow", function(){
    $('#searchContainer > form input').on("input", function(){    
        alert($('#TheList li:not(.ui-screen-hidden)').length);    
    });
});

Upvotes: 2

Related Questions