jQueryMobile listview with filter reveal, show items on click

Question

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

Answer 1

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