Как пометить jQuery мобильное меню выбора после добавления ввода-поиска в подменю

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"); в функции поиска. Когда она удалена, надписи на кнопках и список параметров работают должным образом, однако, функция поиска, конечно, не работает должным образом.

Есть ли возможность, позволяющая пометить кнопку выбора в главное меню и список пунктов со значением только в подменю? Спасибо!

Answer 1

JQM имеет собственное соглашение об именах.

Например: popup, который будет создан для отображения короткого списка options, получит свой собственный id, составленный путем объединения "id" из выбор, за которым следует ключевое слово "listbox-popup" .

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 empty value will be used as data-placeholder -->
          <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("");
  }
});