入力補完を使う の変更点

*入力補完について [#hc847144]
　Googleなどの検索サイトを使うとき、一、二文字、フォームに入力するとその下に「あなたが検索したいキーワードはもしかしてこれ？」と候補がいくつか表示される。キーワードをうろ覚えの状態で検索するとき便利な機能だ。最近、Googleで「夫」と入力したときの予測キーワードの内容がすごいと話題になった。
#ref(otto.gif)
[[ひょえ～！ 『Google』で「夫」のあとにスペースを記入すると！ - ガジェット通信>http://getnews.jp/archives/37384]]

　XOOPSでこの機能を使うとなると最初に候補に挙がるのはやはり「検索」だろうが、ユーザがどのキーワードで検索するかアクセスログをずっと見ていかないとわからないし、一つ一つ書き出すのも大変な作業だ。なので、もう少し手軽な感じで入力補完を行いたい。私の本家には[[OpenID認証モジュール>http://xoops.hypweb.net/modules/xpwiki/401.html]]をインストールしているので、ここの入力フォームで使っている。ユーザが入力する文字列が限られていて予測キーワードの書き出しが容易なためだ。
**OpenID認証モジュールで使う [#i44f120f]
　入力補完を行うにあたって、[[suggest.js - 入力補完ライブラリ>http://www.enjoyxstudy.com/javascript/suggest/]]の設定をし、サーバにアップロードする。OpenID認証モジュールで使うイメージは[[サンプル1>http://www.enjoyxstudy.com/javascript/suggest/demo/demo1.html]]で掴める。
　サンプルではフォームの下にある、
#pre{{
<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>
}}
　↑このスクリプト部分、これを、
#pre{{
<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']; ←書き換え
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にある入力フォームの下辺りに貼りつけよう。
#pre{{
<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」という予測キーワードが表示される。
#ref(hokan.gif)
　勿論、ユーザが検索しようとするキーワードの想像がつき、それは20もないということであれば、検索フォームに使ってみてもいいと思う。
**suggest.jsのライセンスに気をつける [#l4319111]
　suggest.jsを「JavaScriptファイルのサイズ軽減」に書いたような方法で圧縮することは当然可能である。しかし、YUI Compressorで圧縮すると著作権表記とライセンス表記が綺麗さっぱり消えてしまう。suggest.jsは[[MITライセンス>http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license]]で著作権表記とライセンス表記を消して使うのはライセンス違反になるので注意しよう。この事態を回避するには、YUI Compressorで圧縮後、改めて著作権表記とライセンス表記部分を貼りつけるという方法がある。

[PR]