У нас есть несколько фильтруемых входных данных на странице, которые хотят показать список, когда в фокусе находится фильтруемый список.
Чего мы хотим добиться, так это:
- когда пользователь нажимает на поиск в списке, показывает небольшой набор вариантов (5 или 10)
- когда пользователь начинает вводить текст в поле поиска, мы используем событие filertablebeforefilter, чтобы сузить выбор и обновить записи li.
HTML:
<input type="hidden" id="jobtemp" name="jobtemp" value="" />
<input type="hidden" id="jobcode" name="jobcode" />
<ul id="jobautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Job ..." data-filter-theme="a">
<li><a href="#">Job 1</a>
</li>
<li><a href="#">Job 2</a></li>
</ul>
<input type="hidden" id="phasetemp" name="phasetemp" value="" />
<input type="hidden" id="phasecode" name="phasecode" />
<ul id="phaseautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Cost Code ..." data-filter-theme="a">
<li><a href="#">Phase 1</a>
</li>
<li><a href="#">Phase 2</a></li>
</ul>
Код:
$("#jobautocomplete").on("filterablebeforefilter", function (e, data) {
// .. ajax to refresh the <li> values in the filterable listview
}
$("#phaseautocomplete").on("filterablebeforefilter", function (e, data) {
// .. ajax to refresh the <li> values in the filterable listview, also filter based on the value in the jobautocomplete text field.
}
Мы пробовали что-то похожее на это
представление списка jQueryMobile с отображением фильтра, отображение элементов по щелчку
но не смог найти способ, который позволил бы нам отображать только тот список, который имеет фокус (не все фильтруемые списки).
