最新のWeb開発のチュートリアル
 

jQuery Mobileフィルター



フィルタ可能要素

複数の子要素を持っているすべての要素は、濾過することができます。

どのように検索フィールドを作成するには:

  • あなたが濾過可能になりたい要素は、含まれている必要がありdata-filter="true"属性を。
  • 作成<input>指定されたIDを持つ要素をし、追加data-type="search"属性を。 これは、基本的な検索フィールドを作成します。 ラップ<input>の形での、および追加"ui-filterable"にクラスを<form>要素-これは検索フィールドと濾過可能な要素の間のマージンを調整します。
  • そして、追加data-inputフィルタ可能要素に属性を。 その値は、のIDと一致する必要があります<input>要素を。

以下では、濾過可能なリストビューを作成しました:

リスト内の要素を検索します

<form class="ui-filterable">
  <input id="myFilter" data-type="search">
</form>


<ul data-role="listview" data-filter="true" data-input="#myFilter" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
</ul>
»それを自分で試してみてください

ヒント:検索フィールドの期待値を説明する短いヒントを指定するには、プレースホルダを使用します。

<input id="myFilter" data-type="search" placeholder="Search for names.." >
»それを自分で試してみてください

カスタムフィルタ

それぞれの子要素内のテキストは、(のようなフィルタリングに使用される実際のテキストである"Adele"または"B"のための"Billy" )。 あなたが代わりにカスタムフィルタテキストに検索をフィルタリングしたい場合は、任意の子要素にデータ-filtertext属性を追加することができます。

<li data-filtertext="fav" ><a href="#">Adele</a></li>
»それを自分で試してみてください

あなたが使用している場合はdata-filtertext要素の属性を、その特定の要素の元のテキスト/コンテンツは、(上記の例では、あなたはもはやリスト項目を検索することができますフィルタリングのために無視されていない"Adele" 。あなただけ見つけることができますキーワード入力して、アデル"f, a, vまたはfav 」。)


その他の例

折りたたみリストをフィルタリング
リストの折り畳み式のセットをフィルタリングする方法。

フィルタテーブル
テーブルをフィルタリングする方法。

フィルタ<div>要素を
フィルタリングする方法<div>子含む要素<p>要素を。