Question

我有一个带过滤器的多选。过滤工作正常，但是当您选择过滤的项目时，它不会更改为选定的状态（所选项目的框中没有勾选）。

我按照官方JQuery Mobile页面的说明进行操作。唯一的区别是他们不使用多重选择。是否有解决方法使过滤器功能具有多个选择框？

我的选择：

<form>
<div class="ui-field-contain">
    <label for="title-filter-menu">Placeholder:</label>
    <select id="title-filter-menu" multi data-native-menu="false" class="filterable-select">
        <option>Select fruit...</option>
        <option value="orange">Orange</option>
        <option value="apple">Apple</option>
        <option value="peach">Peach</option>
        <option value="lemon">Lemon</option>
    </select>
</div>
</form>

JS

  ( function( $ ) {
function pageIsSelectmenuDialog( page ) {
    var isDialog = false,
        id = page && page.attr( "id" );
    $( ".filterable-select" ).each( function() {
        if ( $( this ).attr( "id" ) + "-dialog" === id ) {
            isDialog = true;
            return false;
        }
    });
    return isDialog;
}
$.mobile.document
    // Upon creation of the select menu, we want to make use of the fact that the ID of the
    // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
    // We retrieve the listview and insert a search input before it.
    .on( "selectmenucreate", ".filterable-select", function( event ) {
        var input,
            selectmenu = $( event.target ),
            list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
            form = list.jqmData( "filter-form" );
        // We store the generated form in a variable attached to the popup so we avoid creating a
        // second form/input field when the listview is destroyed/rebuilt during a refresh.
        if ( !form ) {
            input = $( "<input data-type='search'></input>" );
            form = $( "<form></form>" ).append( input );
            input.textinput();
            list
                .before( form )
                .jqmData( "filter-form", form ) ;
            form.jqmData( "listview", list );
        }
        // Instantiate a filterable widget on the newly created selectmenu widget and indicate that
        // the generated input form element is to be used for the filtering.
        selectmenu
            .filterable({
                input: input,
                children: "> option[value]"
            })
            // Rebuild the custom select menu's list items to reflect the results of the filtering
            // done on the select menu.
            .on( "filterablefilter", function() {
                selectmenu.selectmenu( "refresh" );
            });
    })
    // The custom select list may show up as either a popup or a dialog, depending on how much
    // vertical room there is on the screen. If it shows up as a dialog, then the form containing
    // the filter input field must be transferred to the dialog so that the user can continue to
    // use it for filtering list items.
    .on( "pagecontainerbeforeshow", function( event, data ) {
        var listview, form;
        // We only handle the appearance of a dialog generated by a filterable selectmenu
        if ( !pageIsSelectmenuDialog( data.toPage ) ) {
            return;
        }
        listview = data.toPage.find( "ul" );
        form = listview.jqmData( "filter-form" );
        // Attach a reference to the listview as a data item to the dialog, because during the
        // pagecontainerhide handler below the selectmenu widget will already have returned the
        // listview to the popup, so we won't be able to find it inside the dialog with a selector.
        data.toPage.jqmData( "listview", listview );
        // Place the form before the listview in the dialog.
        listview.before( form );
    })
    // After the dialog is closed, the form containing the filter input is returned to the popup.
    .on( "pagecontainerhide", function( event, data ) {
        var listview, form;
        // We only handle the disappearance of a dialog generated by a filterable selectmenu
        if ( !pageIsSelectmenuDialog( data.prevPage ) ) {
            return;
        }
        listview = data.prevPage.jqmData( "listview" ),
        form = listview.jqmData( "filter-form" );
        // Put the form back in the popup. It goes ahead of the listview.
        listview.before( form );
    });
})( jQuery );

CSS

.ui-selectmenu.ui-popup .ui-input-search {
    margin-left: .5em;
    margin-right: .5em;
}
.ui-selectmenu.ui-dialog .ui-content {
    padding-top: 0;
}
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
    margin-top: 0;
}
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
    border-top-width: 1px;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
    border-bottom-width: 1px;
}

Answer 1

我发现，选择了正确的选项，但筛选列表中显示的选定状态是错误的。
如果您有选项

a1
b1
c2
d2

使用过滤器＆＃34; 1＆＃34;你得到了

a1
b1

您可以正确选择每一个。
如果您过滤＆＃34; 2＆＃34; 你得到了

c2
d2

如果你选择c2（这是所选列表的第一个选项和原始列表的第三个选项），jquerymobile会尝试在！third上显示所选状态！！filtered list＆＃34;的选项。这就是错误。

然而，使用基本过滤的选择示例ist有效（http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/中的第一个）问题此处：过滤条（搜索输入）位于选择标题（结束图标+标签）上方。

JQuery多选过滤器bug

1 个答案: