Question

我想将这个http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/实现到我的项目中，但我没有得到任何东西，只有一个图像循环在屏幕中心。

<fieldset data-role="collapsible">
    <label>Your preferred programming language: </label>
    <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>
</fieldset>

身体标签后：

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

我还尝试将$ .mobile.document放在$ .function（）中，结果是一样的，一个图像在屏幕中心循环而没有任何内容。

http://i.stack.imgur.com/zBsK0.jpg

我做错了什么？感谢。

Answer 1

该行：

listview.filterable({
    input: input
});

1.3.x不支持

。根据此StackOverflow answer ，演示版未使用已发布的1.3版本，而filterable（）方法在1.4之前不可用。

我在 FIDDLE 中使用1.4构建了相同的演示，但它确实有效。因此，您需要等待1.4版本才能获得此功能。

选择jQueryMobile过滤器

1 个答案: