jQuery Mobile フィルタ

❮ 前章へ 次章へ ❯


フィルタリング要素

複数の子要素を持つすべての要素をフィルタリングできます。

検索フィールドの作成方法:

下にフィルタリング可能なリストビューを作成しました:

リスト内要素の検索

<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>
Try it Yourself »

チップ: プレースホルダを使用して、検索フィールドの期待する値を表す短いヒントを指定します:

<input id="myFilter" data-type="search" placeholder="Search for names..">
Try it Yourself »

カスタム・フィルタ

各子要素内のテキストは、フィルタリングに使用される実際のテキストです("Adele" や "Billy" の場合の "B" など)。 しかし、検索をカスタム・フィルタ・テキストにフィルタリングしたい場合は、任意の子要素に data-filtertext 属性を追加できます:

<li data-filtertext="fav"><a href="#">Adele</a></li>
Try it Yourself »

要素に data-filtertext 属性を使用すると、個々の要素のテキスト/コンテンツはフィルタリングで無視されます (上記の例では、リスト項目 "Adele" を検索することはできません。"f, a, v や fav" というキーワードでしか Adele を検索できません)。


その他の例

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

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

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



❮ 前章へ 次章へ ❯