絞込検索を実現したくて試したコードです
オブジェクトの中の特定の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を返す |
