jquery 移动分组复选框搜索过滤器

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，您将只会得到一个元素，并且不会更新为所有 Angular 都为圆 Angular 。但是，您可以使用 JS 实现此目的(我不确定您是否可以在 CSS 中仅对可见元素进行选择)。

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