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
E.g. 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...)

Have you tried preventing any action on first .keypress and execute your code on second event? — Omar
– Omar, Commented Jun 9, 2013 at 20:12

Alkis Kalogeris · Accepted Answer · 2013-06-09 21:58:13Z

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.

edited Jun 9, 2013 at 21:58

answered Jun 9, 2013 at 21:24

Alkis Kalogeris

17.9k15 gold badges62 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 10, 2013 at 2:34

yeyene

7,4001 gold badge24 silver badges29 bronze badges

1 Comment

Alkis Kalogeris Over a year ago

+1 I didn't know about this. They add new features constantly!

Collectives™ on Stack Overflow

Custom listview - filtering on user input

2 Answers 2

Comments

HTML

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

HTML

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related