yamachan Ajax/.NET/C# メモ

2007-02-24

[Ajax] 入力フィールドにSuggest機能をつけてみる (1)

少し前から、本blogの右上に検索ボックスが表示されているのにお気づきでしょうか? この検索ボックスですが、ちょっと仕掛がしてあります。

キーワードを入れると、↓のように候補が下に表示されるようになっています。 キーワードをクリックすると、自動入力されます。 a,r,y とか入力してみてください。

Suggest付の検索ボックスの例

IE などのブラウザにも似た機能がありますが、こちらはAjaxで実装されています。 初めて使用する時も有効なこと、表示されるキーワードはサイト管理者が設定したものであること、あたりがメリットでしょうか。

正直、中身はあまりJavaScriptっぽくないコードで、書き直している最中なのですが、、、とりあえず動いているバージョンを、バックアップも兼ねて貼っておきます。

2007/2/27 追記: 書き直した版 を公開しました

実際の検索ボックスですが、まずは以下のようなscriptが貼ってあります。

<script>
function my_submit() {
var k = y_suggest_target.value;
location.href = 'http://www.google.co.jp/search?
q=site:http://yamachan-cs.blogspot.com/ ' +
encodeURIComponent(k);
}

function my_search_helpLine(key) {
return "<span
onclick=\"yamachan_suggest_click('"+key+"');\"
onmouseover=\"this.style.color='red';\"
onmouseout=\"this.style.color='blue';\">"
+ key + "</span><br />";
}

var my_dic = [
"Ajax",
"aptana",
...途中省略
"unescapeHTML"
];
</script>

my_submit() はSuggest機能とは関係なく、単に検索実行用の関数です。 Google をSite:オプションをつけてキーワード検索する単純なものです。

my_search_helpLine() は表示用の補助関数です。 必須ではありません。 Suggestされるキーワードの上にマウスがある場合、キーワードを赤色にするためのhtml出力を定義しています。

my_dic がSuggestされるキーワード文字列の配列になります。 これらの事前定義に続き、以下のhtmlが貼られています。

<form style="margin:0">
<input size="20" id="my-search-field"
onkeyup="yamachan_suggest(
'my-search-field','my-search-help',
my_dic, my_search_helpLine);"
/>
<img src="search.gif"
width="48" height="24" alt="Search"
onclick="my_submit();"
/>
</form>

<div id="my-search-help"
style="visibility:hidden;display:none;color:blue">
</div>

実際の入力欄に onkeyup が指定されていること、ヘルプ表示用のdivエリアが非表示で用意されていること、の二点がポイントでしょうか。

さて利用されている関数ですが、メイン部分は以下のようになっています。 最初のvarがとても恥ずかしいデスネ。

var yamachan_suggest_target;
var y_suggest_help;
var y_suggest_dic;
var y_suggest_func;

function yamachan_suggest(f, h, dic, func) {
y_suggest_target=document.getElementById(f);
y_suggest_help=document.getElementById(h);
y_suggest_dic = dic;
y_suggest_func = func;
var skey=yamachan_lastWord(y_suggest_target.value);
y_suggest_help.innerHTML=y_suggest_helpHTML(skey);
if (y_suggest_help.innerHTML == "") {
y_suggest_help.style.visibility = 'hidden';
y_suggest_help.style.display = 'none';
} else {
y_suggest_help.style.visibility = 'visible';
y_suggest_help.style.display = 'block';
}
}

yamachan_lastWord() は以前にご紹介したもので、文字列の最後の1単語を得る関数です。 また以下の補助的な関数を使用します。

function yamachan_suggest_helpHTML(skey){
if (skey == "") return "";
var sk = skey.toLowerCase();
var val = "";
for(loop=0;loop<y_suggest_dic.length;loop++){
var k = y_suggest_dic[loop];
if (k.toLowerCase().indexOf(sk) == 0) {
if (y_suggest_func ==null||y_suggest_func=='')
val = val +
"<span onclick=\"yamachan_suggest_click('"
+ k + "');\">" + k + "</span><br />";
else
val = val + y_suggest_func(k);
}
}
return val;
}

function yamachan_suggest_click(k) {
var skey=yamachan_lastWord(y_suggest_target.value);
if (skey != "") {
y_suggest_target.value =
y_suggest_target.value.substring(0,
y_suggest_target.value.length-skey.length) + k;
y_suggest_help.innerHTML =
yamachan_suggest_helpHTML(k);
y_suggest_target.focus();
}
}

yamachan_suggest_helpHTML() はキーワードリストのhtmlを作成する関数です。 yamachan_suggest_click() はその生成されたhtmlに埋め込まれ、キーワードをクリックしたときに呼び出されます。

今回はベタに検索ボックスに使用してみましたが、いろいろ活用方法はあるとおもいます。 例えば製品名を入力する欄で、代表的な製品をSuggestしてみるとか。

0 Comments:

コメントを投稿

Links to this post:

リンクを作成

<< Home