WEBデザイン Tips

テキスト入力欄のオートコンプリートは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);
　}
};

半角スペースと全角スペースの位置を比較して、大きい方を返すようにし、これで半角スペースが前に入力されたいた場合に全角スペースを入力しても入力補完の候補が表示されるようになった・・・と思いたい。
コードがあんまりスマートじゃないが、今のところ問題は無いよう。