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

问题描述 投票：2回答：1

我对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");。删除该按钮后，按钮标签和选项列表应该可以正常工作，但是搜索功能当然不能正常工作。

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

javascript jquery css jquery-mobile
1个回答
0
投票

JQM有其自己的命名约定。

例如：popup（将显示为options的简短列表）将获得其自己的id，其由以下内容组成：将选择的“ id”后面加上关键字“ listbox-弹出窗口”。

dialog-page（将创建以显示超过页面高度的一长串options列表），将获得其自己的id，该列表由以下内容组成：将选择的“ id”串联在一起关键字“ dialog”。

因此，考虑到这一点，我相信仅当显示对话框页面时才需要过滤器，因为每次打开选择时都会动态选择popup和dialog-page之间的选择。

因此代码甚至更简单，因为可以在此处使用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 vaue="" data-placeholder="true">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");
  data["list"].attr("data-filter", "true");
});

$(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();
    }
    data["list"].find("li[data-placeholder='true']").addClass("ui-screen-hidden");
  }
});

$(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("");
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.