Listview 可在自定义选择中筛选

我想在jquery mobile中进行一个可过滤的选择

这是jquery移动站点的一个示例

我曾多次尝试在JSFIDLE上做一个示例，但都没有成功

<script>
    $.mobile.document

        // "filter-menu-menu" is the ID generated for the listview when it is created
        // by the custom selectmenu plugin. Upon creation of the listview widget we
        // want to prepend an input field to the list to be used for a filter.
        .on( "listviewcreate", "#filter-menu-menu", function( e ) {
            var input,
                listbox = $( "#filter-menu-listbox" ),
                form = listbox.jqmData( "filter-form" ),
                listview = $( e.target );

            // 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();

                $( "#filter-menu-listbox" )
                    .prepend( form )
                    .jqmData( "filter-form", form );
            }

            // Instantiate a filterable widget on the newly created listview and
            // indicate that the generated input is to be used for the filtering.
            listview.filterable({ input: input });
        })

        // The custom select list may show up as either a popup or a dialog,
        // depending 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.
        //
        // After the dialog is closed, the form containing the filter input is
        // transferred back into the popup.
        .on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) {
            var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ),
                placeInDialog = ( e.type === "pagebeforeshow" ),
                destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" );

            form
                .find( "input" )

                // Turn off the "inset" option when the filter input is inside a dialog
                // and turn it back on when it is placed back inside the popup, because
                // it looks better that way.
                .textinput( "option", "inset", !placeInDialog )
                .end()
                .prependTo( destination );
        });
    </script>
    <style>
        .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;
        }
    </style>

<form>
                <select id="filter-menu" data-native-menu="false">
                    <option value="SFO">San Francisco</option>
                    <option value="LAX">Los Angeles</option>
                    <option value="YVR">Vancouver</option>
                    <option value="YYZ">Toronto</option>
                </select>
            </form>

事实上，我能做到这一点，问题是我很难在我的环境中使用它

我需要一个函数，我可以在填充select后调用，而不是在$.mobile.document上调用

我用第一部分做了一个函数。onlistviewcreate。。。我在填充select后调用的，我认为我被卡住的是第二部分

我的结果是一个弹出窗口，可以做我想要的一切，但没有任何样式，是透明的

---

任何帮助都将不胜感激

您是否尝试过直接拨打电话。选择菜单刷新，true；动态更改选项列表后

$("#filter-menu").empty().append(opts).selectmenu( "refresh", true );

更新：

---

在更新的fiddle中，单击按钮更改选项列表，并查看过滤器是否仍然有效…

虽然您的回答没有解决我的vauge问题，但您让我找到了正确的方向。谢谢