jquery-uiを使ってオートコンプリートをしていたところがbootstrap3導入によってぶっ壊れたので、bootstrapの流儀に則ったオートコンプリートで実装し直そうと思って調べてみました。
調査段階
bootstrap3-typeahead
これを使ってみようとしたのですが、マルチバイト文字だとうまく動かない…？
あまり情報がなかったので、とりあえず放置しました。
typeahead.js
twitter-bootstrapだった頃のものっぽいのでどうなんだろう？と思いましたが、これを採用しました。
cssはtypeahead.js-bootstrap3.lessから拝借しました。
typeahead.jsにはcssが含まれてないので、ここで多少つまりました。
typeahead.jsの使い方
typeahead.jsは、BloodhoudとTypeaheadの2つで構成されています。
Bloodhoundは、サジェストエンジンを担い、TypeaheadがUI Viewを担っているようです。
Bloodhoundを使わずにサジェストを行うこともできますが、Typeaheadのsourceに対して、自分で絞り込み用の関数を定義して渡さなければならないので、ここは素直にBloodhoudを使った方が楽そうです。
BloodhoundはAjaxによる検索(remote)などにも対応していますが、今回は既にあるデータからの検索(local)を使う事にしました。サンプルはCoffeeScriptなので、適宜読み替えてください。
カスタムイベントがあるので、コールバック関数を仕込むことができます。
coffeescript
# 1度だけjsonを取得するようにした
$.get '/foo/bar.json', (data) ->
engine = new Bloodhound(
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
)
engine.initialize()
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'engine',
displayKey: 'value', # json配列の各オブジェクトのvalue要素を表示
source: engine.ttAdapter()
}
).on('typeahead:opened', (event) ->
# オートコンプリートを開始時にコールバック
console.log('opened')
).on('typeahead:closed', (event) ->
# 選択した、しないに関わらず終了時にコールバック
console.log('closed')
).on('typeahead:cursorchanged', (event, datum) ->
# カーソル移動時にコールバック
# datumに選択中のオブジェクトが渡されている
console.log('cursorchanged')
).on('typeahead:selected', (event, datum) ->
# 選択した時にコールバック。この後にtypeahead:closedが呼ばれる
# datumに選択されたオブジェクトが渡されている
console.log('selected')
).on('typeahead:autocompleted', (event, datum) ->
# 選択せずに右矢印キーなどで入力補完をしたときにコールバック
# datumに選択されたオブジェクトが渡されている
console.log('autocompleted')
)
以上です。