jQuery Mobile逆引きリファレンス
Filterableウィジェットでリスト／テーブルなどに検索機能を付与するには？
リストやテーブル、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Filterableウィジェットを利用することで、リスト、テーブルをはじめ、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できます*1。ここでは、最もよく利用すると思われるリスト／テーブルでの検索の例を中心に用法を紹介していきます。
- *1 jQuery Mobile 1.4以降の機能です。1.3以前では、ListViewウィジェットの一機能として提供されていましたので、（当然）リストの検索機能しか実装できませんでした。
Filterableウィジェットの基本
まずは、基本的なリストに対して、Filterableウィジェットで検索機能を付与する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--1検索ボックスを準備-->
<form class="ui-filterable">
<input id="keywd" data-type="search" />
</form>
<!--検索対象のリスト-->
<ul data-role="listview" data-filter="true" data-input="#keywd">
<li><a href="#">Rails 4ポケットリファレンス</a></li>
<li><a href="#">Windows 8開発ポケットリファレンス</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室</a></li>
<li><a href="#">10日でおぼえるPHP入門教室</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a></li>
<li><a href="#">独習ASP.NET 第4版</a></li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
Filterableウィジェットを利用するには、まず検索キーワードを入力するための検索ボックスを設置します（1）。あとは、これを検索対象の要素グループ（ここではリスト）に対してひも付けるだけです。ひも付けには、以下の属性を指定します。
- data-filter属性： 検索機能を有効化
- data-input属性： 検索ボックスのid値
data-input属性が省略された場合、jQuery Mobile 1.4のFilterableウィジェットは自動的にリストの先頭に検索ボックスを付与します。ただし、この機能はjQuery Mobile 1.3以前との互換性を維持するためのもので、1.5では削除される予定です。特別な理由がない限り、data-input属性は省略せずに明示するようにしてください。
検索機能付きテーブルの作成
テーブル、その他の要素グループに検索機能を付与する場合も同様、コンテナー要素に対してdata-filter／data-input属性を指定するだけです。
|
<form class="ui-filterable">
<input id="keywd" data-type="search" />
</form>
<table id="tbl" data-role="table" data-mode="reflow" class="ui-responsive"
data-filter="true" data-input="#keywd">
<thead>
<tr>
<th><abbr title="ISBNコード">ISBN</abbr></th>
<th>タイトル</th>
<th>出版社</th>
<th>価格</th>
<th>配本日</th>
</tr>
</thead>
<tbody>
<tr>
<td>978-4-7741-6296-6</th>
<td>Windows 8開発ポケットリファレンス</td>
<td>技術評論社</td>
<td>3024</td>
<td>2014年02月19日</td>
</tr>
……中略……
</tbody>
</table>
|
検索ボックスが空の場合の動作
そもそも検索キーワードが指定されていない場合、Filterableウィジェットは対象の要素（リスト項目やテーブル行など）をフィルターせずに全てのデータを表示します。もしも、検索ボックスが空のときに、リスト／テーブルも空にしたい場合には、data-filter-reveal属性にtrueを設定してください。
|
<form class="ui-filterable">
<input id="keywd" data-type="search" />
</form>
<ul data-role="listview" data-filter="true"
data-input="#keywd" data-filter-reveal="true">
……中略……
</ul>
|
なお、Filterableウィジェットは、その他にもいくつかのパラメーターを公開していますが、そのうち、data-filter-placeholder／data-filter-themeパラメーターはjQuery Mobile 1.3以前との互換性を維持するためのパラメーターです。1.4時点で非推奨の扱いで、1.5では削除される予定なので、利用しないようにしてください。
※以下では、本稿の前後を合わせて5回分（第26回～第30回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
26. ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
27. ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには？
ListViewウィジェットを使って作成したリストに対して、サムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法を説明する。
28. 【現在、表示中】≫ Filterableウィジェットでリスト／テーブルなどに検索機能を付与するには？
リストやテーブル、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
29. Filterableウィジェットによる検索ルールをカスタマイズするには？
リスト／テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。
