宮崎在住エンジニアのジョウ(@JotarO_Oyanagi) です。

Javascript のフレームワークを使うことが多くなってきたので、ビルドされたファイルの容量を抑えるために極力ライブラリを使用せず済むよう、リストの絞り込みは Native の Javascript でやっちゃおう、とあれこれした結果をご紹介します。

TL;DR

Native Javascript でリストの絞り込みを行う（条件はテキストのみ）
IE9 以上 を対象とする
使用するのは Array.filter 、 Array.every

こんな関数を作ってみた

/**
* @param strQuery 絞り込みするためのクエリ
* @param arrData 絞り込み対象リストのデータ
*/

var getFilteredList = function(strQuery, arrData) {

  // 入力されたクエリをスペースで区切って配列に格納
  var arrFilterConditions = strQuery.trim().replace(/　/g, ' ').split(' ');

  // Array.filter の callback
  // 引数の objItem は filter 対象の配列要素
  var hasMatchingParam = function(objItem) {

    // Array.every の callback
    // 引数の strFilterCondition は every 対象の配列要素
    var includesQueryString = function(strFilterCondition) {
      var arrParams = Object.keys(objItem);
      var strTesting = '';

      // 対象のパラメータ値を連結（今回は全パラメータ）
      arrParams.forEach(function(strParam) {
        strTesting += objItem[strParam]
      })

      // 対象のパラメータ値（連結済み）に入力されたクエリが含まれているかを判断
      return strTesting.indexOf(strFilterCondition) !== -1
    }

    // 入力されたそれぞれのクエリに対し、条件に合うリストがあるかを判断
    return arrFilterConditions.every(includesQueryString)
  };

  // リストのデータの中に、入力されたクエリにマッチするリストがあるかを判断
  return arrData.filter(hasMatchingParam);
};

デモはこちら（jsfiddle）

indexOf を使用していますが、 IE を対象外とするならば includes に置き換えられます。

ちなみに今回、入力された文字列、およびパラメータ値を整形（ Upper => Lower 、 ひらがな => カタカナ など）する処理入れていませんが、実際の使用にあたっては実装することをオススメします。

終わりに

IE のない世界を見るまで頑張る。

Native Javascript でリスト絞り込み（条件はテキストのみ）

TL;DR

こんな関数を作ってみた

終わりに