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

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

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


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してみるとか。