読者です 読者をやめる 読者になる 読者になる

茶豚のプログラマーBlog

プログラミング、猫、盆栽など。 日々の出来事や、覚えた技術を共有する。

jQuery 表示フィルタをつくってみる (JavaScript)

JavaScript jQuery

WEBぺージを作成する時、 JavaScriptjQueryを使うと結構簡単に表示フィルタが実装できます。 案外知らない人が多かったので、共有します。

表示フィルタ

ここで言う表示フィルタとは、 何らかの一覧リストがあって、検索窓にキーワードを入力すると 検索にマッチするリストだけが表示されるというもの。

重要なのは、3つ!

これらを駆使する事で、簡単にフィルタ実装ができる!!

実際に実装してみる。

HTMLはこんな感じでリストと、表示フィルタの入力欄があるものを想定。

<input type="button" onclick="reset();" value="リセットボタン"/>
<input id="filter" type="text" placeholder="表示フィルタ"/>

<ul>
    <li data-keyword="hoge">hoge</li>
    <li data-keyword="piyo">piyo</li>
    <li data-keyword="foo">foo</li>
</ul>

で、肝心のJavaScriptはこんな感じだ。

<script>
function filter(){
    var text = $('#filter').val();
    if ("" == text){
        $('li[data-keyword]').show();
        return;
    }

    $('li[data-keyword]').hide();
    $('li[data-keyword*=' + text + ']').show();
}

function reset(){
    $('#filter').val("");
    filter();
}

$(document).ready(function () {
    $('#filter').keyup(function () {
        filter();
        return (13 !== event.which);
    });

    filter();
});
</script>

入力ボックスのキーイベントに、filter関数を挟む。
空文字が入力されているときは、もちろん全件表示となるようにしている。
event.which は入力されたキーの番号で、13はエンターキーの事だ。
エンターキーが押されたときはfalseを返す事で、フィルター入力枠でsubmitを抑止する事ができる。

一番肝になるのが、属性セレクタで、data属性の文字列と部分一致した場合にマッチする。
(*=)という演算子で比較する。

[data-keyword*=hoge]

おわり

一覧表示はいろんなところにあるが、 既存の構造を変えなくても、data属性を加えるだけで、簡単に表示フィルタが実装できるぞ!!
これで、いろんなところにフィルタ追加して便利にしてみよう〜。