入力補完を行うためのライブラリを作ってみた

スポンサーリンク
                                                                                                            • -

2006/01/24:ライセンスについて追記しました。

                                                                                                            • -

JavaScriptで入力補完を(割と)手軽に行えるようなライブラリを作ってみました。

入力補完というと、Google Suggestのように入力内容から逐次サーバと非同期通信し、その結果を表示するといった方式(Ajax)がぱっと思いつきますが、このライブラリでは、補完候補の全件をあらかじめクライアント側で保持し、その後はJavaScriptを使って検索を行う方式をとってます。

下記を読んでなければ、こんなことしようとは思わず、何でもAjaxでやろうとして、サーバの負荷上げていたと思います。

ma.laさんの記事はいつも勉強になります。ありがとうございます。

作ってみて、気になった点を下記に挙げておきます。

  • 当初、keyupイベントを拾って検索を行うようにしていましたが、検索データ量が多くなった場合に、処理が追いつかなくなったので、一定周期で入力内容を監視(setTimeoutを繰り返し)し、差分があった時のみ検索するようにしました。(データ量が少なければ、keyupイベントでも十分だと思います)
  • 入力フォームからフォーカスが移動した際に、その移動先が補完候補のリスト以外の場合、補完候補を消すようにしていますが、いまいちしっくりきません。 入力フォームのblurイベントでsetTimeoutをしかけて、補完候補のリストに対してのclickイベントが発生しなかったら消す!みたいにしているのですが、、もっといい方法がありそうな気がしています。

ライセンスについては、制約がほとんど無い「クリエイティブ・コモンズ 帰属 2.1 日本」とします。