Javascriptによるオートコンプリート(入力補完)suggest.js

テキスト入力欄のオートコンプリートはRailsではプラグインがいくつかあるが、日本語入力で難があるとの事なので、suggest.jsを導入してみた。
手順としては、スタイルを定義し、suggest.jsを読み込んだ上で、HTML上で以下の設定をする。
今回は複数キーワードのオートコンプリートをするので、LocalMultiに変更する。
function startSuggest() {
new Suggest.LocalMulti(
"text", // 入力のエレメントID
"suggest", // 補完候補を表示するエリアのID
list, // 補完候補の検索対象となる配列
{dispMax: 10, interval: 1000}); // オプション
}

window.addEventListener ?
window.addEventListener('load', startSuggest, false) :
window.attachEvent('onload', startSuggest);

ただしこのままだと1つめのキーワードを入力した後、半角スペースを入力しないと次の候補が表示されない。
日本語のキーワードを入力後であれば、全角スペースを入力してしまうユーザーが大半だと思われるので、これを半角・全角スペースいずれでも次の候補が表示されるように改良する。

バージョン2.1はを使用。

405行目
Suggest.LocalMulti.prototype.delim = ' '; // delimiter ※ ' '内は半角スペース
の後に
Suggest.LocalMulti.prototype.secondDelim = ' '; // sub delimiter ※ ' '内は全角スペース
を追加する。

469行目
Suggest.LocalMulti.prototype.getLastTokenPos = function() {
return this.input.value.lastIndexOf(this.delim);
};
Suggest.LocalMulti.prototype.getLastTokenPos = function() {
if (this.input.value.lastIndexOf(this.delim) < 0) {
return this.input.value.lastIndexOf(this.secondDelim);
} else {
return this.input.value.lastIndexOf(this.delim);
}

};
とする。
これで、1つめのキーワードの後に全角スペース、半角スペースいずれが入力された場合も、次の候補が表示されるはず。
Mac Firefox,Safariでしか検証していないけど・・・。


【追記】作者さんのコメントを元に改良
Suggest.LocalMulti.prototype.getLastTokenPos = function() {
 if (this.input.value.lastIndexOf(this.secondDelim) >this.input.value.lastIndexOf(this.delim)){
  return this.input.value.lastIndexOf(this.secondDelim);
 }else{
  return this.input.value.lastIndexOf(this.delim);
 }

};
半角スペースと全角スペースの位置を比較して、大きい方を返すようにし、これで半角スペースが前に入力されたいた場合に全角スペースを入力しても入力補完の候補が表示されるようになった・・・と思いたい。
コードがあんまりスマートじゃないが、今のところ問題は無いよう。
タグ:javascript AJAX
posted by digital-squad at 2009年01月07日 13時57分 | Comment(1) | TrackBack(0) | Ajax/JavaScript
この記事へのコメント
はじめまして、onozatyです。
suggest.jsのご利用ありがとうございます!

この方法だと、複数区切り文字があった場合に、必ず最後の区切り文字が変えるとは限りません。
例えば、"aa bb c"のような場合に、全角スペースが後ろにあっても、その前の半角スペースの方で検索されてしまいます。
なので、両方の位置を取得した上で、大きい値を返すのがよいのではと思います。

以上、ご参考まで。
Posted by onozaty at 2009年01月10日 01:28
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック