-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
2006/01/24:ライセンスについて追記しました。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
JavaScriptで入力補完を(割と)手軽に行えるようなライブラリを作ってみました。
入力補完というと、Google Suggestのように入力内容から逐次サーバと非同期通信し、その結果を表示するといった方式(Ajax)がぱっと思いつきますが、このライブラリでは、補完候補の全件をあらかじめクライアント側で保持し、その後はJavaScriptを使って検索を行う方式をとってます。
下記を読んでなければ、こんなことしようとは思わず、何でもAjaxでやろうとして、サーバの負荷上げていたと思います。
ma.laさんの記事はいつも勉強になります。ありがとうございます。
作ってみて、気になった点を下記に挙げておきます。
- 当初、keyupイベントを拾って検索を行うようにしていましたが、検索データ量が多くなった場合に、処理が追いつかなくなったので、一定周期で入力内容を監視(setTimeoutを繰り返し)し、差分があった時のみ検索するようにしました。(データ量が少なければ、keyupイベントでも十分だと思います)
入力フォームからフォーカスが移動した際に、その移動先が補完候補のリスト以外の場合、補完候補を消すようにしていますが、いまいちしっくりきません。 入力フォームのblurイベントでsetTimeoutをしかけて、補完候補のリストに対してのclickイベントが発生しなかったら消す!みたいにしているのですが、、もっといい方法がありそうな気がしています。
ライセンスについては、制約がほとんど無い「クリエイティブ・コモンズ 帰属 2.1 日本」とします。