Underscore.jsを使って、簡単に絞り込み検索を実装する

以前作ったサイトで、扱っている商品をカテゴリや値段で絞り込みできる検索機能をつけたいという要望がありました。

どうしたもんかと思っていたのですが、Underscore.jsを使って実装してみたら、とても簡単に良い感じにできたので紹介します！

Underscore.jsの説明については、以前TipsNoteで紹介されているので詳細な説明は省きますが、簡単に言うとJavaScriptの便利な命令がたくさん詰まったライブラリです。

Underscore.jsの使い方

個人的には、配列やオブジェクトを使った処理がすごく楽になるところが特にお気に入りです！

デモ

いきなりデモからいきます！
色 形 を指定して 検索 を押すと絞り込み検索が行われます。

See the Pen underscore.jsを使った絞り込み検索 by daichi (@kandai) on CodePen.

良い感じに絞りこまれてますね！

簡単に解説していきます。
※ Underscore.jsと、DOM操作などにjQueryを使用しているので、2つのライブラリが読み込まれている前提で進めます。

検索・出力するデータを用意

今回の方法は、JavaScriptの配列を検索して、一致するものを取得するような方法をとっていますので、
なにはともあれ、データがないと検索ができません！

絞込検索のキーになるカテゴリ(今回であれば色・形)の値や、HTMLで出力する要素をオブジェクト形式でまとめて配列にします。

今回使用したサンプルのデータは、下記のような名前・色・形の情報を持ったデータです。
(省略してます)

// データを定義
var items = [
  {
    "name"  : "赤い四角",
    "color" : "red",
    "type"  : "square"
  },
  {
    "name"  : "赤い丸",
    "color" : "red",
    "type"  : "circle"
  },
  …
];

実際は、データ部分だけ別のファイルとしておくのが、汎用性が高そうです。
作成したサイトでは、商品一覧データをjsonにしてajaxでデータを読みこむような形にしました。

セレクトボックスの値を取得して、データから一致するものを探す

検索の処理には、Underscore.jsで用意されている _.where というメソッドを使います。

var results = _.where(items, {color: "red", type: "circle"});

これだけで、配列の中から、colorが red で、typeが circle に一致するオブジェクトを配列で返してくれます！素敵！

なので、検索ボタンが押された時にセレクトボックスの値を取得して、メソッドの第2引数に入るようにしています。
検索ボタンを押した時の処理全体はこんな感じ。

// 検索が押された時の処理
$('#search').on('submit' , function(event){
　// デフォルトのイベントをキャンセル
  event.preventDefault();

  // 検索項目のオブジェクトを作成してセレクトボックスの値を格納
  var query = {};
  if($('#color').val() != ''){
    query.color = $('#color').val();
  }
  if($('#type').val() != ''){
    query.type = $('#type').val();
  }

  // データの中から一致するオブジェクトを検索
  var results = _.where(items, query);

  // 返ってきた配列で出力処理
  outputResults(results);
});

HTMLとして出力

あとは、HTMLに出力していくだけです。
出力処理は別の関数にしました。
これも検索ボタンが押された時に実行されます。

// 検索結果の出力処理
function outputResults(results){
    // 変数の初期化
    var html = '';

    // 受け取った配列をループで処理
    // 出力するHTMLの整形
    jQuery.each(results, function() {
        html += '<div class="item ' + this.color + ' ' + this.type + '">';
        html += this.name;
        html += '</div>';
    });

    // HTMLに出力
    $('#items').empty().append(html);
}

// ページ読み込み時はすべてのアイテムを出力する
$(window).on('load', function(){
  outputResults(items);
});

今回のデモでは、最初に全データを出力しているので、
読み込み時にも1度実行するようにしています。

まとめ

この方法を使えば、DBやAPI無しで簡単に実装することができるので、
そんなに規模の大きくないサイトなどでは使いやすいかと思いました。

すべてのデータを読み込むので、絞込したい要素がものすごく多いサイトなどでは重くなったりするかもしれません。

実装したサイトは商品点数は100弱でしたが、快適に動作していました。

今更ながらUnderscore.jsはとても便利でした！今後はもっと使うことになりそうです！

参考サイト

Underscore.js 公式サイト
http://underscorejs.org/

Underscore.js入門 (全10回) - プログラミングならドットインストール
http://dotinstall.com/lessons/basic_underscorejs

遅すぎたUnderscore.js入門
http://qiita.com/hp0me/items/72d80dc166aace2759dc