jQueryMobile listviews with filter reveal、click items on

Question

フィルタリング可能なリストビューにフォーカスがあるときにリストを表示するために、複数のフィルタリング可能な入力がページにあります。私たちが達成したい何

です：

1. ユーザーがリストビュー検索をクリックしたときに、小さな選択肢のセット（5または10）を示しているが
2. ユーザーが検索ボックスにテキストを入力開始し、我々は、 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 listview with filter reveal, show items on click

が、方法を考え出すことができませんでした私たちはlistviを表示することができましたフォーカスを持っているew（すべてのフィルタリング可能なリストビューではない）入力からの焦点とリストビューを表示するには

Answer 1

：

まず兄弟ULを見つけるために、jQueryの次の機能を使用すると、クラスのUI-濾過可能 で親フォームを見つけます。

$("input[data-type='search']").on("focus", function() {   
     $(this).val(""); 
     var list = $(this).parents("form.ui-filterable").next('ul'); 
     list.listview('destroy').data("filter-reveal", false); 
     list.find('li').removeClass("ui-screen-hidden"); 
     list.listview('refresh'); 
}).on("keydown", function() { 
     var list = $(this).parents("form.ui-filterable").next(); 
     list.listview('destroy').data("filter-reveal", true); 
     list.find('li').addClass("ui-screen-hidden"); 
     list.listview('refresh'); 
}); 

DEMO