Question

我正在尝试向我的Jquery移动电源Web应用程序添加一个可搜索的选择控件。我可以找到关于该主题的唯一Stack Overflow问题

Jquery Mobile: How to Make Custom Select Box with filter

建议按照此处的演示进行操作

http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/

HTML

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

JS

$.mobile.document
// The custom selectmenu plugin generates an ID for the listview by suffixing the ID of the
// native widget with "-menu". Upon creation of the listview widget we want to place an
// input field before the list to be used for a filter.
.on( "listviewcreate", "#filter-menu-menu,#title-filter-menu-menu", function( event ) {
    var input,
        list = $( event.target ),
        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 listview and indicate that the
    // generated input form element is to be used for the filtering.
    list.filterable({
        input: input,
        children: "> li:not(:jqmData(placeholder='true'))"
    });
})
// 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,
        id = data.toPage && data.toPage.attr( "id" );
    if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
        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,
        id = data.toPage && data.toPage.attr( "id" );
    if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
        return;
    }
    listview = data.toPage.jqmData( "listview" ),
    form = listview.jqmData( "filter-form" );
    // Put the form back in the popup. It goes ahead of the listview.
    listview.before( form );
});

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

然而，即使将此演示中的代码完全复制到新的测试项目中，该页面也不会加载并停留在旋转加载器动画上。

我在这里缺少什么？谢谢。

修改

控制台错误
考虑使用＆＃39; dppx＆＃39;单位，如CSS＆＃39; dpi＆＃39;表示每CSS英寸的点数，而不是每物理英寸的点数，因此不符合实际的“dpi”数字。一个屏幕。在媒体查询表达式中：仅屏幕和（-webkit-min-device-pixel-ratio：1.3），而不是全部，仅屏幕和（最小分辨率：200dpi）
未捕获的TypeError：无法读取属性＆＃39; loader＆＃39;未定义的jquery.mobile-1.3.0.min.js：2
未捕获的TypeError：undefined不是函数

Jquery手机在试图按照演示时坚持加载

修改

0 个答案: