入力補完を使う のバックアップ(No.2)

入力補完について

　Googleなどの検索サイトを使うとき、一、二文字、フォームに入力するとその下に「あなたが検索したいキーワードはもしかしてこれ？」と候補がいくつか表示される。キーワードをうろ覚えの状態で検索するとき便利な機能だ。最近、Googleで「夫」と入力したときの予測キーワードの内容がすごいと話題になった。

otto.gif

ひょえ～！ 『Google』で「夫」のあとにスペースを記入すると！ - ガジェット通信

　XOOPSでこの機能を使うとなると最初に候補に挙がるのはやはり「検索」だろうが、ユーザがどのキーワードで検索するかアクセスログをずっと見ていかないとわからないし、一つ一つ書き出すのも大変な作業だ。なので、もう少し手軽な感じで入力補完を行いたい。私の本家にはOpenID認証モジュールをインストールしているので、ここの入力フォームで使っている。ユーザが入力する文字列が限られていて予測キーワードの書き出しが容易なためだ。

OpenID認証モジュールで使う

　入力補完を行うにあたって、suggest.js - 入力補完ライブラリの設定をし、サーバにアップロードする。OpenID認証モジュールで使うイメージはサンプル1で掴める。
　サンプルではフォームの下にある、

<script type="text/javascript" language="javascript">
<!--
// 補完候補の配列作成
var list = [ 'Java', 'JavaScript', 'Perl', 'Ruby', 'PHP', 'Python', 'C', 'C++', '.NET','MySQL', 'Oracle', 'PostgreSQL'];

// wondowのonloadイベントでSuggestを生成
var start = function(){new Suggest.Local("text", "suggest", list);};
window.addEventListener ?
window.addEventListener('load', start, false) :
window.attachEvent('onload', start);
//-->
</script>

　↑このスクリプト部分、これを、

<script type="text/javascript" language="javascript">
<!--
// 補完候補の配列作成
var list = [ 'yahoo.co.jp', 'mixi.jp', 'livedoor.com', 'google.com/accounts/o8/id', 'biglobe.ne.jp', 'excite.co.jp']; ←書き換え

// wondowのonloadイベントでSuggestを生成
var start = function(){new Suggest.Local("openid_identifier", "suggest", list);}; ←書き換え
window.addEventListener ?
window.addEventListener('load', start, false) :
window.attachEvent('onload', start);
//-->
</script>

　と書き換え、altsysなどを使ってopenid_consumer.htmlにある入力フォームの下辺りに貼りつけよう。

<form method="post" action="<{$xoops_url}>/modules/openid/try_auth.php">
<{if $frompage != ''}>
 <input type="hidden" name="frompage" value="<{$frompage}>" />
<{/if}>
 <input type="text" name="openid_identifier" id="openid_identifier" />
 <input type="submit" value="<{$smarty.const._LOGIN}>" />
 <div id="suggest"></div> ←書き加えた(予測キーワードが表示される部分)
</form>
</div>
<script type="text/javascript" src="suggest.js"></script> ←書き加えた
↓貼りつけた
<script type="text/javascript" language="javascript">
<!--
// 補完候補の配列作成
var list = [ 'yahoo.co.jp', 'mixi.jp', 'livedoor.com', 'google.com/accounts/o8/id', 'biglobe.ne.jp', 'excite.co.jp'];

// wondowのonloadイベントでSuggestを生成
var start = function(){new Suggest.Local("openid_identifier", "suggest", list);};
window.addEventListener ?
window.addEventListener('load', start, false) :
window.attachEvent('onload', start);
//-->
</script>

　任意の名前をつけたjsファイルにして適当なフォルダに入れてリンクを張ってもいいだろう。スタイルシートの適用も忘れずに。設置がうまくいけば、ユーザが「y」と入れた時点で「yahoo.co.jp」という予測キーワードが表示される。

hokan.gif

　勿論、ユーザが検索しようとするキーワードの想像がつき、それは20もないということであれば、検索フォームに使ってみてもいいと思う。

suggest.jsのライセンスに気をつける

　suggest.jsを「JavaScriptファイルのサイズ軽減」に書いたような方法で圧縮することは当然可能である。しかし、YUI Compressorであっし

[PR]