jquery mobile分组复选框搜索过滤器

Question

我想要带有搜索过滤器的垂直分组复选框。

有没有一种方法可以将常规搜索筛选器列表设置为垂直分组的复选框？

或

我可以将搜索筛选器添加到复选框组中吗？

示例已启动：http://jsfiddle.net/NwbZu/

Answer 1

您可以使用CSS将listview压缩到更小的空间：

/*remove background color from search input*/
.ui-listview-filter {
    background : none;
}
/*remove the vertical padding, background gradient, and border for each list-item*/
#dataPointList .ui-li {
    padding    : 0px 15px;
    background : none;
    border     : none;
}
/*remove the margin from the check-box container*/
#dataPointList .ui-li .ui-checkbox {
    margin : 0;
}
/*remove the rounded corners from all of the .ui-btn elements*/
#dataPointList .ui-li .ui-checkbox .ui-btn-corner-all {
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
    border-radius         : 0;
}
/*re-add the rounded corners (top only) for the first list-item element*/
#dataPointList .ui-li:first-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-top-left-radius  : 1em;
    -moz-border-top-left-radius     : 1em;
    border-top-left-radius          : 1em;
    -webkit-border-top-right-radius : 1em;
    -moz-border-top-right-radius    : 1em;
    border-top-right-radius         : 1em;
}
/*re-add the rounded corners (bottom only) for the last list-item element*/
#dataPointList .ui-li:last-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-bottom-left-radius  : 1em;
    -moz-border-bottom-left-radius     : 1em;
    border-bottom-left-radius          : 1em;
    -webkit-border-bottom-right-radius : 1em;
    -moz-border-bottom-right-radius    : 1em;
    border-bottom-right-radius         : 1em;
}

下面是一个演示：http://jsfiddle.net/NwbZu/2/

当你搜索时，这不会更新列表，例如，如果你在演示中搜索6，你只会得到一个项目，并且它不会更新为圆角。然而，您可以使用JS来实现这一点（我不确定您是否可以在CSS中只为可见元素进行选择）。

如果你有任何问题，请告诉我。

Answer 2

如果我想使用一个选择菜单，但在第二个页面中有过滤的选项，该怎么办？这是个好主意吗？

在下面的例子中，我在分离的页面中创建了一个选择菜单和一个过滤列表视图：

...
<select id="myselect" name="myselect" data-native-menu="false" multiple="multiple">
...
<ul id="dataPointList" data-role="listview" data-filter="true">
...

每次更改复选框时，我都会更新选择菜单。

回到第一页，我们可以看到选择菜单，其中选择了正确的选项。

这是代码：http://jsfiddle.net/leandrocosta/NwbZu/108/