入力補完を手軽に行えるJavaScriptライブラリ「suggest.js」【feedpost tips】

先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。5回目は入力欄での入力補完を実装するためのJavaScriptライブラリ「suggest.js」。

候補としては他に、

などがありましたが、仕様を整理して検討したところ、

Ajax通信で取得する必要は無い。ページ読み込み時のリストで十分。
UIやデザインが凝っている必要は無い。
読み込みライブラリ数は少なければ少ないほど良い。

ということになり、候補の中で最もシンプルな「suggest.js」を採用するに至りました。「feedpost」で使用するJavaScriptライブラリはすべてjQueryプラグインに限定しようと考えていたのですが、jQueryプラグインとしてリリースされているものは大体高機能すぎたのですよね。「jQuery UI」を使っている人やもっと複雑なことがやりたい人は、「jQuery UI Autocomplete」を選択すると良いかと思います。

実装はこんな感じ。

基本的にはページのロード時に「new」すればどこでも使用出来るんですが、グローバルスコープを汚染しないようにjQueryのonLoad＋無名関数で準備しています。

複数のキーワードを連続して入力していく場合には

普通に入力補完した場合キーワードが入力されて終わりですが、以下のように「LocalMulti」を使うとキーワードが入力されたあと指定した文字列（デフォルトは半角スペース）を入力して次の入力を待ち、区切り文字のあとに何か文字列を入力するとそれに対して補完が行わいます。

これはタグ入力のように「スペースで区切って複数入力する」場合に便利です。
（「feedpost」で利用しているのはこれです）

その他いくつかのシチュエーションに応じたサンプル、オプション設定などについては公式サイト（日本語）を参照して下さい。