Custom listview - filtering on user input

Question

OK, here's my issue :

• I'm trying to implement a jQueryMobile-based listview with LOTS of items (and when I'm saying "lots", I mean in the tens of thousands)
• The elements don't have to appear inside the list, from the beginning but instead shown depending on what the user has typed
• Eg Wait for the user to input at least 2 characters, and then show (append to the list) just the appropriate items
• And so on...

How would you go about that? Is there any existing workaround to this problem? (I've searched everywhere but cannot find anything working...)

Answer 1

If you are using a filter for your listview you should check the source code.

else {
//filtervalue is empty => show all
listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
}

Here it shows all the elements if the search area is blank. You can change this to hide all, instead of show all. That way you can have your listview full and the default behavior will take care of showing the results you want. Although this begins to work from the very first type. You can change that too, and check the length of the search text every time it is called (onKeyUp event) if it's lengthOfText >= 2 .

EDIT You will have to hide them yourself when the list is loaded. Just add

"ui-screen-hidden"

to your li elements.

//Regardless of what you do in the end, please provide a link so I can see the performance. I'm really curious.

Answer 2

You can use

data-filter-reveal="true"

Here is the DEMO http://jsfiddle.net/yeyene/SjbMd/2/

HTML

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>