Latest web development tutorials

jQueryのモバイル・フィルター

あなたは要素をフィルタリングすることができます

一つ以上のサブエレメントをフィルタリングすることができる場合、すべての要素。

どのように検索フィールドを作成します。

  • あなたは要素をフィルタリングするデータ・フィルタ= "true"属性を使用する必要があります。
  • <input>要素を作成し、要素= "検索"属性でid、プラスのデータ型を指定します。 これは、基本的な検索フィールドを作成します。 このクラスは、検索フィールドの外に調整し、離れてフィルタエレメントからなります - <input>要素は、フォームの<form>要素は、「UI-濾過可能」クラスを使用して、フォームに配置されます。
  • そして、フィルタエレメントのデータ入力属性を追加します。 この値は、IDの<input>要素である必要があります。

次に、フィルタリングされたリストを作成します。

リスト検索要素

<フォームクラス= "UI-濾過可能 」>
<入力のid = "myFilterを"データ型=「検索」>
</フォーム>

<ulのデータ役割= "リストビュー"データ・フィルタ= "true"のデータ入力= "#のmyFilterを">
<李> <a href="#">アデルする</a>ます。</ li>
<李> <a href="#">ビリー</a>にます。</ li>
<李> <a href="#">カルバンする</a>ます。</ li>
</ UL>

»をお試しください

ヒント:あなたは 、メッセージを設定するには、検索フィールドにプレースホルダー属性を使用することができます。

<入力のid = "myFilterを"データ型=「検索」プレースホルダ= " 名前を検索するには応じ..">

»をお試しください

カスタムフィルタ

一般的に、各リスト項目のテキストに挿入された(例えば、対応する「アデル」または「B」は「ビリー」に対応するなど)は、フィルタテキストとして使用することです。 カスタムテキストフィルタを指定したい場合しかし、あなたは子要素にデータ-filtertext属性を使用する必要があります。

<LIデータ-filtertext = "FAV "> <a href="#">アデルする</a>ます。</ li>

»をお試しください
ノート F、V、または:あなたは要素内のデータ-filtertext属性を使用する場合、ソースのテキスト内容要素は、あなたが「アデル」項目のリストを探すために持っている場合、フィルタは、その後、などのキーワードの使用を必要とする場合に無視されますFAV。
例

より多くの例

濾過折り畳ま一覧
どのフィルタリストを折られました。

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

<div>要素をフィルタリング
子の<div>要素をフィルタリングする方法<p>要素が含まれています。