suggest.jsと、script.aculo.usのAutocompleter.Localの比較

スポンサーリンク

追記:2006/05/21
現時点での動作を再比較(script.aculo.us:1.6.1、suggest.js:1.4)

                        • -

当方で公開しているsuggest.jsと同じような機能として、script.aculo.usにAutocompleter.Localというものがあります。

どちらも、クライアントサイドで検索し、入力補完を行うという点で、同じような機能を提供しますが、イベントの取り方や、比較方法などで違いがありますので、ここにサンプルを作成してみました。
なお、script.aculo.us1.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&ブラウザとの組み合わせに注意が必要です。(FireFoxIMEオンでサンプルを実行してみると、イベントが発生していないことがわかると思います)


script.aculo.us Love!な私ですが、はてブでコメントもらうまで、Autocompleter.Localについて知りませんでした。(Ajax.Autocompleterは知ってたのですが…)
今回、このように比較してみましたが、どっちがいい!とも言い切れませんので、両方試してみて、要件や好みにあった方を使うのが良いのではと思います。