LANG SELRCT

コードを書く場所についてはこちら

2018年2月27日火曜日

オブジェクトのkeyを対象に絞り込み検索を実現する(その1)


絞込検索を実現したくて試したコードです


オブジェクトの中の特定のKEYに含まれる文字列で絞り込み検索をするコードの例です
  1. 検索エリアにキーワードとなる文字列を入力する
  2. オブジェクトのKEYを見て絞り込み検索を行う
    • 入力された文字をすべて含むKEYだけを抽出する
  3. 抽出されたKEYとVALUEを取得して返す

デモ

index.htmlのobj内の en で絞り込む






上部のテキストボックスに ar と入力すると
en の中で ar を含むものだけに絞り込まれる



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <input type="text" id="searchbox"><br>
  <textarea id="ta" style="width:240px;height:240px;"></textarea>
  <div id="result"></div>

  <script>
    var obj = [{
        "en": "Aries",
        "ja": "おひつじ座"
      },
      {
        "en": "Taurus",
        "ja": "おうし座"
      },
      {
        "en": "Gemini",
        "ja": "ふたご座"
      },
      {
        "en": "Cancer",
        "ja": "かに座"
      },
      {
        "en": "Leo",
        "ja": "しし座"
      },
      {
        "en": "Virgo",
        "ja": "おとめ座"
      },
      {
        "en": "Libra",
        "ja": "てんびん座"
      },
      {
        "en": "Scorpius",
        "ja": "さそり座"
      },
      {
        "en": "Sagittarius",
        "ja": "いて座"
      },
      {
        "en": "Capriconus",
        "ja": "やぎ座"
      },
      {
        "en": "Aquarius",
        "ja": "みずがめ座"
      },
      {
        "en": "Pisces",
        "ja": "うお座"
      }
    ]

    var searchbox = document.getElementById("searchbox");
    var ta = document.getElementById("ta");
    var pattern;    
    searchbox.onkeyup = searchbox_keyup;

    function searchbox_keyup() {
      var items = searchbox.value.split(" ");
      var str = "";
      for (var i = 0; i < items.length; i++) {
        str += "(?=.*" + items[i] + ")";
      }
      pattern = new RegExp("^" + str);
      var filtered = obj.filter(judge);
      var result = get_result(filtered);
      ta.value = result;
    }

    function judge(items) {
      var regexp = new RegExp(pattern);
      var judged = regexp.test(items["en"]);
      return judged;
    }

    function get_result(filtered) {
      var result = [];
      for (var i = 0; i < filtered.length; i++) {
        result.push([filtered[i]["en"], filtered[i]["ja"]]);
      }
      return result;
    }
  </script>
</body>
</html>
意訳
 


テキストボックス
テキストエリア
div


12星座の英語表記と日本語表記のオブジェクト

















































idがsearchboxの要素を取得する
idがtaの要素を取得する
patternの入れ物を用意する
searchbox内でキーが上がったらsearchbox_keyupを実行する

この機能がやること
searchboxの値を半角スペースで区切って
正規表現のパターンの文字列を入れる入れ物を用意する
半角スペースで区切られた数だけ以下を繰り返す
一致するキーワードを含むものだけに絞り込んでいく

正規表現オブジェクトを作る
obj中身をjudgeで処理した結果を取得して
get_resultに渡してresultを取得して
taに入れる


この機能がやること
patternで正規表現オブジェクトを作って
obj["en"]の要素の中で正規表現に一致すれば
返す


この機能がやること
resultの入れ物を作って
受け取ったfilteredの数だけ繰り返す
enとjaのセットをそれぞれresultに追加する

できあがったresultを返す