主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: 検索候補(サジェスト)表示のプロトタイプ

                
tags: JavaScript
自分のサイトに検索のサジェスト機能を付けたかったので、そのプロトタイプを作ってみた。実装するには検索候補のリファレンスリストを作っておくか、非同期通信でどっかから入手する必要がある。非同期通信で入手するならGoogle Suggest APIなるものがあるらしい。キーワードでググればこれに関して書かれたブログなどの記事を見られるが、公式のドキュメントは見つけることができなかった。まあ他にもBingやYahooでも同様のAPIサービスがあるらしい。今回はリファレンスリストの内容が特殊なものだったので、自前で用意した。

リファレンスリストを用意したら、あとはinput要素を用意してkeyupイベントをキャッチして処理するだけ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
position:relative;
overflow:visible;
}

#input_form{
width: 300px;
height: 20px;
}

#candidates{
position:absolute;
top: 25px;
left:0px;
border-style: solid;
border-width: 1px;
background-color: white;
}
</style>
</head>
<body>
<div id="box">
<input id="input_form" type="text" onkeyup="suggest(this, 'candidates');" onfocus="suggest(this, 'candidates');">
<div id="candidates"></div>
</div>
<div>any content</div>
<script>
var list = ["ウィリアム・アレクサンダー・グラハム",
"ウィリアム・アレクサンダー・ハーヴェイ",
"ウィリアム・アレクサンダー・モーガン",
"ウィリアム・アレクサンダー・リチャードソン",
"ウィリアム・アレン",
"ウィリアム・アレン・ミラー",
"ウィリアム・アロンゾ",
"ウィリアム・アンダース",
"ウィリアム・アンド・メアリー",
"ウィル・スミス"]

function suggest(target, id)
{
var el = document.getElementById(id);
if (el.hasChildNodes()) el.removeChild(el.lastChild);

var CANDIDATES_MAX = 100;
var candidates = [];
var word = target.value;
if (!word) return;
for (var i=0; i<list.length; i++)
{
if (list[i].search(word) > -1)
{
candidates.push(list[i])
if (candidates.length > CANDIDATES_MAX) break;
}
}

var children = document.createElement("div");
for (var i=0; i<candidates.length; i++)
{
(function()
{
var child = document.createElement("div");
var text = candidates[i];
child.onclick = function()
{
document.getElementById('input_form').value = text;
removeSuggest('candidates');
};
child.onmouseover = function(){child.style.backgroundColor="#99f";};
child.onmouseout = function(){child.style.backgroundColor="#fff";};
child.textContent = candidates[i];
children.appendChild(child);
})();
}

el.appendChild(children);

}

function removeSuggest(id)
{
var el = document.getElementById(id);
if (el.hasChildNodes()) el.removeChild(el.lastChild);
}
</script>
</body>
</html>


デモ
検索候補として出てくるものは下記。「ウィ」と入力してみたり「アレク」と入力してみたり。

ウィリアム・アレクサンダー・グラハム
ウィリアム・アレクサンダー・ハーヴェイ
ウィリアム・アレクサンダー・モーガン
ウィリアム・アレクサンダー・リチャードソン
ウィリアム・アレン
ウィリアム・アレン・ミラー
ウィリアム・アロンゾ
ウィリアム・アンダース
ウィリアム・アンド・メアリー
ウィル・スミス




input要素への入力で動的に生成される検索候補要素のイベント(マウスオーバー、オフによる背景色の変更とクリックによる入力補助)は匿名関数で実装した。JavaScriptはブロックがブレース"{}"で区切られない。だからforループの中でどんどん匿名関数を使って任意の要素に登録して、と単純にやってはいけなくて、匿名関数のなかの変数でレキシカルスコープを使って解決される変数の値が変化するか、していいかを頭に置いておかなければならない。今回のスクリプトではforループの中をまるまる匿名関数でくるんでしまうことで、変数がそれぞれのループで独立したものになるようにした。こういうときにはC#とか良かったなぁと感じる。Hello World書くにもクラスがいるというのは敷居が高いと思うけども。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。