带有筛选器的jQueryMobile listview显示，单击显示项目 [英] jQueryMobile listview with filter reveal, show items on click

问题描述

我有一个使用数据过滤器显示功能使用jqueryMobile创建的列表视图.此功能将隐藏列表元素，并在您键入时显示与输入的字符匹配的元素.我的数据源是本地的(这意味着列表是静态填充的).

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

我知道我可以只使用jQuery的所有元素并自己进行显示/隐藏，但是我想知道是否存在我不知道的现成可用的解决方案.

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.

推荐答案

没有现成的解决方案，但是，您可以执行以下操作.

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

当input聚焦为 时，设置.listview( "option", "filterReveal", true );并通过添加ui-screen-hidden jQM类手动隐藏所有列表视图项.当模糊化时，撤消上一个操作.

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.

注意: filterReveal 在jQM 1.4.0中已弃用，并将在1.5.0中删除.

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

这篇关于带有筛选器的jQueryMobile listview显示，单击显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！