フィルター機能付きリストの実装方法 - jQuery 入門

ここではフィルター機能付きリストの実装方法を説明します。 jQuery では、UL 要素に data-role="listview" 属性を設定することで、モバイル表示時に操作しやすい形式のリスト表示にすることができます。 片手でスマートフォンを持って、親指で項目を選択しなければならない場合は、ひとつひとつの項目が少し大きめに表示されていないと不便ですよね。 こうした場合には data-role="listview" を利用します。 さらに、属性を追加するだけでここで紹介するような、リスト項目のフィルター機能を非常に簡単に実装することが可能です。 さっそく具体例を挙げて説明します。ここで作るサンプルは次のように動きます。 リスト項目として、ハワイ、カリフォルニア、テキサスの三つが表示されています。そして、その上に検索(フィルター)用のテキストボックスがあります。 このテキストボックスに文字