リストを使いこなそう (4/5)

この他に、リストを使う際、覚えておきたいのが「フィルター」機能です。フィルターとは、特定の条件により、表示する項目を絞り込む機能です。これは、実際にやってみたほうが早いでしょう。

下のリストのページにアクセスすると、リストの一番上に、検索に使うルーペのついた入力フィールドが表示されます。ここで文字をタイプすると、その文字を含む項目だけが瞬時に表示されます。例えば「s」と入力すれば、「Six」「Seven」の２項目だけが表示されます。

このフィルタリング機能は、実はほんのわずかな記述だけで作ることができます。リストを見ると、<ul>タグが以下のように書かれていることがわかるでしょう。

<ul data-role="listview"  data-filter="true">

このdata-filter="true"という属性を用意すると、自動的にフィルタリング機能がONとなり、リストの上部に検索フィールドが表示されるようになります。実に簡単！

実際に使ってみると、この検索フィールドはデフォルトで「Filter items...」といったテキストがうっすらが表示されるようになっていることに気がつきます。やはり、ここは日本語で説明テキストを表示させたほうがいいですね。<ul>タグに、以下のような属性を追加してみてください。

data-filter-placeholder="検索テキスト"

これで、検索フィールドに表示されるデフォルトのテキストが「検索テキスト」と日本語に変わります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<!-- home page -->
<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
		<p>※リスト表示のサンプル。</p>
		<ul data-role="listview"  data-filter="true">
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>Four</li>
			<li>Five</li>
			<li>Six</li>
			<li>Seven</li>
			<li>Eight</li>
			<li>Nine</li>
		</ul>
	</div>
</div>