CODEWITHSUNDEEP
jqueryjquery-mobile
M Rajoy
M Rajoy

Reputation: 4094

jQueryMobile listview with filter reveal, show items on click

I have a listview created with jqueryMobile using the data-filter reveal feature. This feature hides the list elements and shows those matching the entered characters as you type. My data source is local (meaning the list is statically populated).

What I would like to do is to show all items without the need to enter any characters, but when the list itself gets the focus (and hide them when it's lost).

I know I could just jQuery all elements and do the show/hiding myself but I was wondering whether there was an out-of-the box solution available that I don't know of.

Upvotes: 1

Views: 1974

Answers (1)

Omar
Omar

Reputation: 31732

There is no out-of-the box solution, however, you can do the following.

When input is focused, set .listview( "option", "filterReveal", true ); and hide all list view items manually by adding ui-screen-hidden jQM class. When blurred, reverse the previous action.

Note: filterReveal is deprecated in jQM 1.4.0 and will be removed in 1.5.0.

var list = $("#list");

$("input").on("focus", function () {
    $(this).val("");
    list.listview("option", "filterReveal", false);
    list.children().removeClass("ui-screen-hidden");
    list.listview("refresh");
}).on("keydown", function () {
    list.listview("option", "filterReveal", true);
    list.children().addClass("ui-screen-hidden");
    list.listview("refresh");
});

Demo

Upvotes: 1

Related Questions