手順としては、スタイルを定義し、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
suggest.jsのご利用ありがとうございます!
この方法だと、複数区切り文字があった場合に、必ず最後の区切り文字が変えるとは限りません。
例えば、"aa bb c"のような場合に、全角スペースが後ろにあっても、その前の半角スペースの方で検索されてしまいます。
なので、両方の位置を取得した上で、大きい値を返すのがよいのではと思います。
以上、ご参考まで。