追記：2006/05/21
現時点での動作を再比較(script.aculo.us:1.6.1、suggest.js:1.4)
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
当方で公開しているsuggest.jsと同じような機能として、script.aculo.usにAutocompleter.Localというものがあります。
どちらも、クライアントサイドで検索し、入力補完を行うという点で、同じような機能を提供しますが、イベントの取り方や、比較方法などで違いがありますので、ここにサンプルを作成してみました。
なお、script.aculo.usは1.5.11.6.1を使用しています。
私の方で確認した主な違いを下記に列挙します。
- 検索時の比較方法
-
- Autocompleter.Local - 前方一致
- suggest.js - 部分一致
どちらも、オプションを指定することにより、部分一致、前方一致を切り替えられます。
- 一致文字の表示
-
- Autocompleter.Local - strongタグで強調表示
- suggest.js - そのまま
どちらも、strongタグで強調表示となります。(suggest.jsでは、オプションでhighlight:trueを指定)
- 補完候補の表示タイミング
- Autocompleter.Local - Keyイベント(Event.observeでkeypressを登録)の発生時に、setTimeoutで一定タイミングを置いた後、入力内容の差分をチェック→差分があった場合、補完候補を再表示
- suggest.js - フォーカスが当たっている間、一定周期で入力内容を確認し、差分があった場合に補完候補を再表示
補完候補の検索タイミングの取り方が、Autocompleter.Local(Ajax.Autocompleterも)は特徴的でした。
if(this.observer) clearTimeout(this.observer); this.observer = setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
上記は、Autocompleter.Localにてキーイベント発生時に呼ばれる関数の処理の一部です。
onObserverEventが、入力内容をもとに補完候補を表示する関数となります。
キーイベント発生時に、まずは既にonObserverEventを呼び出すタイマが登録されていた場合はそれを解除し、新たなタイマを登録します。(this.options.frequencyがデフォルトだと0.4なので、400msのタイマ)
こうすることにより、連続したキー入力があった場合に、onObserverEventが複数回呼ばれるのを防いでいるようです。
suggest.jsでは、入力エリアにフォーカスが当たっている間、一定周期でタイマを繰り返し実行し、入力内容を監視するようにしていますが、Autocompleter.Localではキー入力があって初めてタイマが実行されることになるので、タイマが実行される回数的には少なくてすみそうです。
しかし、キーイベントで取ろうとすると、ブラウザによってはIMEオン時にイベント取れない場合があるので、Autocompleter.Localを使用する場合、IME＆ブラウザとの組み合わせに注意が必要です。(FireFoxでIMEオンでサンプルを実行してみると、イベントが発生していないことがわかると思います)
script.aculo.us Love！な私ですが、はてブでコメントもらうまで、Autocompleter.Localについて知りませんでした。(Ajax.Autocompleterは知ってたのですが…)
今回、このように比較してみましたが、どっちがいい！とも言い切れませんので、両方試してみて、要件や好みにあった方を使うのが良いのではと思います。
