Question

我想在jquery mobile中进行过滤选择。

这是jquery移动网站的一个例子。

http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/

我已经多次尝试在jsfiddle上做一个例子，但没有用。

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

http://jsfiddle.net/lokkin/asvyY/1/

我实际上是让它工作，问题是我在上下文中很难使用它。

我需要一个我可以在填充我的选择后调用的函数，而不是“$ .mobile.document ...”

我已经在第一部分中创建了一个函数“.on（”listviewcreate“...”我在填充选择后调用，我相信我被困在第二部分“.on（” pageshow pagehide“...”

我的结果是一个弹出窗口，可以完成我想要的任何内容，但缺少任何样式并且是透明的。

任何帮助都会有很大帮助！

Answer 1

您是否尝试过调用.selectmenu（“refresh”，true）;动态更改选项列表后？

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

更新了FIDDLE ：

在更新的小提琴中，单击按钮以更改选项列表，并看到过滤器仍然有效...

可过滤内部自定义选择

1 个答案: