絞込検索を実現したくて試したコードです
オブジェクトの中の特定のKEYに含まれる文字列で絞り込み検索をするコードの例です
- 検索エリアにキーワードとなる文字列を入力する
- オブジェクトのKEYを見て絞り込み検索を行う
- 入力された文字をすべて含むKEYだけを抽出する
- 抽出された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を返す |