jQueryモバイルリストフィルタはオートコンプリートのように動作します

Question

jQuery Mobileのリストビューと検索フィルタはうまく動作します。ただし、オートコンプリートコントロールのように振る舞いを変更したい、つまり検索フィルタが入力されるまでリストアイテムが表示されないようにしたいと考えています。

私はjQuery UIを使って他の人が自動完成したのを見ましたが、結果をスタイルするためにこのライブラリと余分な作業を含めなければならないのは残念です。

jQuery Mobile 1.0でこれを行うことはできますか？

Answer 1

あなたはこの

ような何かを試みることができる
• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/（ボタンのクリック）

JS

$("input[data-type='search']").keyup(function() { 
    if($(this).val() == '') { 
     $("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden'); 
    } 
}); 

$('a.ui-input-clear').click(function() { 
    $("input[data-type='search']").val(''); 
    $("input[data-type='search']").trigger('keyup'); 
}); 

HTML（各<li>にクラス属性を追加する必要があります要素class="ui-screen-hidden"）

<div data-role="page" id="filterMe"> 
    <div data-role="content"> 
     <ul data-role="listview" data-filter="true"> 
      <li class="ui-screen-hidden"><a href="#">Acura</a></li> 
      <li class="ui-screen-hidden"><a href="#">Audi</a></li> 
      <li class="ui-screen-hidden"><a href="#">BMW</a></li> 
      <li class="ui-screen-hidden"><a href="#">Cadillac</a></li> 
      <li class="ui-screen-hidden"><a href="#">Chrysler</a></li> 
      <li class="ui-screen-hidden"><a href="#">Dodge</a></li> 
      <li class="ui-screen-hidden"><a href="#">Ferrari</a></li> 
      <li class="ui-screen-hidden"><a href="#">Ford</a></li> 
      <li class="ui-screen-hidden"><a href="#">GMC</a></li> 
      <li class="ui-screen-hidden"><a href="#">Honda</a></li> 
      <li class="ui-screen-hidden"><a href="#">Hyundai</a></li> 
      <li class="ui-screen-hidden"><a href="#">Infiniti</a></li> 
      <li class="ui-screen-hidden"><a href="#">Jeep</a></li> 
      <li class="ui-screen-hidden"><a href="#">Kia</a></li> 
      <li class="ui-screen-hidden"><a href="#">Lexus</a></li> 
      <li class="ui-screen-hidden"><a href="#">Mini</a></li> 
      <li class="ui-screen-hidden"><a href="#">Nissan</a></li> 
      <li class="ui-screen-hidden"><a href="#">Porsche</a></li> 
      <li class="ui-screen-hidden"><a href="#">Subaru</a></li> 
      <li class="ui-screen-hidden"><a href="#">Toyota</a></li> 
      <li class="ui-screen-hidden"><a href="#">Volkswagon</a></li> 
      <li class="ui-screen-hidden"><a href="#">Volvo</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

http://jsfiddle.net/ULXbb/48/

私は、その選択機能を有効にしています。これで、リストからアイテムを選択できます。それは入力フィールドに上書きされ、リストは非表示にされます。

Answer 3

JQuerymobile 1.1.0およびJquery 1.7.2では、このソリューションはもう機能しないようです。

あなたはフィルタボックスをクリアしている場合、彼らは消えないんどちらも、キーボードのDeleteキーを押していない限り、リストからエントリが表示されません...

編集：私はこのサイト上のオートコンプリート機能させるために最適なソリューションを見つけました：http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available