如何在子菜单中添加输入搜索后标记 jQuery 移动 select-菜单

Question

我对 jquery 和运行比较陌生，遇到以下问题：

我有一个主菜单，单击主菜单会打开一个包含多个项目的子菜单。最初，打开子菜单的按钮标有第一个具有空值的 <option>。而第一个 <option> （在我的例子中是国家）没有在子菜单中列出。到目前为止，一切都很好。

     <script src="mbo_master/javascript/jquery-2.1.3.js"></script>
     <script src="mbo_master/javascript/jquery.mobile-1.4.5.js"></script>

$(document).on("pagecreate", "#demo-dialog", function (e) {   
    var form = $("<form><input data-type='search'/></form>"),
        page = $(this);

    $(".ui-content, this")
        .prepend(form);

    form.enhanceWithin()
        .on("keyup", "input", function () {
        var data = $(this).val().toLowerCase();
        $("li", page).addClass("ui-screen-hidden")
            .filter(function (i, v) {
            return $(this).text().toLowerCase().indexOf(data) > -1;
        }).removeClass("ui-screen-hidden");
    });

    $(document).on("pagecontainerhide", function () {
        $("#demo-menu li").removeClass("ui-screen-hidden");
        $("input", form).val("");
    }); 

});

.ui-selectmenu.ui-popup .ui-input-search {
    margin-left: .5em;
    margin-right: .5em;
}

.ui-selectmenu.ui-dialog .ui-content {
    padding-top: 0;
    max-height: 85vh;
    overflow-y: scroll;
}
.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;
    padding-left: 50px;
}

    <label for="demo" id="label">Long list:</label>   
    <select name="demo" id="demo" multiple="multiple" data-native-menu="false" class="select">

        <option data-placeholder="true" value="">Countries</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>

    </select>

在子菜单顶部添加 jquery 搜索字段后，第一个 <option> 的空值出现在子菜单中，这是我不想要的。

我可以删除它 $("#demo option[value='']").remove(); 但随后按钮的标签也消失了。 data-placeholder="true" 也没有用。

我发现是线路的问题 $("#demo-menu li").removeClass("ui-screen-hidden"); 在搜索功能中。当它被删除时，按钮标签和选项列表可以正常工作，但是，搜索功能当然不能正常工作。

是否有可能允许在主菜单中标记 select 按钮并仅在子菜单中列出具有价值的项目？谢谢！

Answer 1

JQM 有自己的命名约定。

例如： popup 将被创建以显示 options 的简短列表，将获得自己的 id，它由 "id"[=41 连接而成=] 的 select 后跟关键字 "listbox-popup".

将创建的 dialog-page 显示超过页面高度的一长串 options，将获得自己的 id，它由连接 "id"的select后跟关键字"dialog".

因此，在考虑之后，我认为只有在显示对话框页面时才需要可过滤，因为每次在 popup 和 dialog-page 之间动态进行选择select 正在开幕。

因此代码更简单，因为可以在此处使用 JQM 内置 data-filter 选项：

HTML:

<div data-role="page" id="page-select-country"> <div data-role="content"> <div class="ui-field-contain"> <label for="country-select">Long list:</label> <select name="country-select" id="country-select" data-native-menu="false">  <option>Choose Your Country</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> ... other oprions... <option value="WY">Wyoming</option> </select> </div> </div> </div>

JavaScript:

$(document).on("selectmenucreate", "#country-select", function(e, ui) { var data = $(this).data("mobile-selectmenu"), hide = {"display": "none"}; data.list .attr("data-filter", "true") .find("li[data-placeholder='true']").css(hide); $(this).on("change", function () { var cases = {"page": data.menuPageClose, "overlay": data.headerClose}, btnClose = cases[data.menuType]; if ($("option:selected", this).length === 0) { btnClose .addClass("ui-icon-delete") .removeClass("ui-icon-check") .css("backgroundColor", "initial"); } else { btnClose .addClass("ui-icon-check") .removeClass("ui-icon-delete") .css("backgroundColor", "#90ee90"); } }); }); $(document).on("pagecontainerbeforeshow", function(e, ui) { var data = $("#country-select").data("mobile-selectmenu"); if(ui.toPage.attr("id") == data["dialogId"]) { if(!ui.toPage.find(".ui-filterable").length) { ui.toPage.find(".ui-content").enhanceWithin(); } } }); $(document).on("pagecontainershow", function(e, ui) { var data = $("#country-select").data("mobile-selectmenu"); if(ui.toPage.attr("id") == data["dialogId"]) { ui.toPage.find(".ui-filterable input").focus(); } }); $(document).on("pagecontainerhide", function(e, ui) { var data = $("#country-select").data("mobile-selectmenu"); if(ui.prevPage.attr("id") == data["dialogId"]) { data["list"].find("li").removeClass("ui-screen-hidden"); ui.prevPage.find(".ui-filterable input").val(""); } });

如何在子菜单中添加输入搜索后标记 jQuery 移动 select-菜单

How to label jQuery mobile select-menu after adding of input-search in sub menu

javascript

jquery

css

jquery-mobile