JQuery множественный фильтр фильтра фильтра

Question

У меня есть множественный выбор с фильтром. Фильтрация работает правильно, но когда вы выбираете отфильтрованный элемент, он не изменяется в выбранном состоянии (в ячейке выбранного элемента нет отметки).

Я следил за инструкциями официальной страницы JQuery Mobile. Единственное различие заключается в том, что они не используют множественный выбор. Есть ли способ обхода фильтра с несколькими блоками выбора?

JQuery Mobile filterable select

Мой выбор:

<form> 
<div class="ui-field-contain"> 
    <label for="title-filter-menu">Placeholder:</label> 
    <select id="title-filter-menu" multi data-native-menu="false" class="filterable-select"> 
     <option>Select fruit...</option> 
     <option value="orange">Orange</option> 
     <option value="apple">Apple</option> 
     <option value="peach">Peach</option> 
     <option value="lemon">Lemon</option> 
    </select> 
</div> 
</form> 

JS

(function($) { 
function pageIsSelectmenuDialog(page) { 
    var isDialog = false, 
     id = page && page.attr("id"); 
    $(".filterable-select").each(function() { 
     if ($(this).attr("id") + "-dialog" === id) { 
      isDialog = true; 
      return false; 
     } 
    }); 
    return isDialog; 
} 
$.mobile.document 
    // Upon creation of the select menu, we want to make use of the fact that the ID of the 
    // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu". 
    // We retrieve the listview and insert a search input before it. 
    .on("selectmenucreate", ".filterable-select", function(event) { 
     var input, 
      selectmenu = $(event.target), 
      list = $("#" + selectmenu.attr("id") + "-menu"), 
      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 selectmenu widget and indicate that 
     // the generated input form element is to be used for the filtering. 
     selectmenu 
      .filterable({ 
       input: input, 
       children: "> option[value]" 
      }) 
      // Rebuild the custom select menu's list items to reflect the results of the filtering 
      // done on the select menu. 
      .on("filterablefilter", function() { 
       selectmenu.selectmenu("refresh"); 
      }); 
    }) 
    // 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; 
     // We only handle the appearance of a dialog generated by a filterable selectmenu 
     if (!pageIsSelectmenuDialog(data.toPage)) { 
      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; 
     // We only handle the disappearance of a dialog generated by a filterable selectmenu 
     if (!pageIsSelectmenuDialog(data.prevPage)) { 
      return; 
     } 
     listview = data.prevPage.jqmData("listview"), 
     form = listview.jqmData("filter-form"); 
     // Put the form back in the popup. It goes ahead of the listview. 
     listview.before(form); 
    }); 
})(jQuery); 

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

Answer 1

я узнал, что правильный вариант выбран, но шо wn выбранное состояние в отфильтрованном списке неверно.
Если у вас есть варианты

a1 
b1 
c2 
d2 

с фильтром "1" вы получите

a1 
b1 

вы можете правильно выбрать каждый из них.
Если фильтр «2» вы получите

c2 
d2 

при выборе c2 (который является первым вариантом выбранного списка и третий из первоначального списка) jquerymobile пытается показать выбранное состояние на треть! ! !. Вариант отфильтрованного списка»вот ошибка

Однако, с основным фильтруются выберите пример IST работы (первую в http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/) проблемы:. Строка фильтра (поиск входа) выше выбор заголовок (Closing icon + Label).