2006-01-22
■[JavaScript]入力補完を行うためのライブラリを作ってみた
-------------------------------------------------------
2006/01/24：ライセンスについて追記しました。
-------------------------------------------------------
JavaScriptで入力補完を(割と)手軽に行えるようなライブラリを作ってみました。
入力補完というと、Google Suggestのように入力内容から逐次サーバと非同期通信し、その結果を表示するといった方式(Ajax)がぱっと思いつきますが、このライブラリでは、補完候補の全件をあらかじめクライアント側で保持し、その後はJavaScriptを使って検索を行う方式をとってます。
下記を読んでなければ、こんなことしようとは思わず、何でもAjaxでやろうとして、サーバの負荷上げていたと思います。
ma.laさんの記事はいつも勉強になります。ありがとうございます。
作ってみて、気になった点を下記に挙げておきます。
- 当初、keyupイベントを拾って検索を行うようにしていましたが、検索データ量が多くなった場合に、処理が追いつかなくなったので、一定周期で入力内容を監視(setTimeoutを繰り返し)し、差分があった時のみ検索するようにしました。(データ量が少なければ、keyupイベントでも十分だと思います)
入力フォームからフォーカスが移動した際に、その移動先が補完候補のリスト以外の場合、補完候補を消すようにしていますが、いまいちしっくりきません。 入力フォームのblurイベントでsetTimeoutをしかけて、補完候補のリストに対してのclickイベントが発生しなかったら消す！みたいにしているのですが、、もっといい方法がありそうな気がしています。
ライセンスについては、制約がほとんど無い「クリエイティブ・コモンズ 帰属 2.1 日本」とします。
知識資源のメタデータ
トラックバック - http://d.hatena.ne.jp/onozaty/20060122/p2
リンク元
- 27 http://b.hatena.ne.jp/
- 19 http://b.hatena.ne.jp/hotentry
- 16 http://b.hatena.ne.jp/Hamachiya2/
- 11 http://b.hatena.ne.jp/entrylist?sort=hot
- 10 http://www.enjoyxstudy.com/javascript/suggest/
- 8 http://b.hatena.ne.jp/entry/http://www.enjoyxstudy.com/javascript/suggest/
- 6 http://feedbringer.net/feed
- 5 http://del.icio.us/ma.la
- 4 http://d.hatena.ne.jp/keyword/クロージャ
- 4 http://labs.ceek.jp/hbnews/list.cgi
