2013年3月25日月曜日

[Twitter Bootstrap]typeaheadの項目をajaxで取得するコード例

Twitter Bootstrapのtypeaheadだけど、ajaxでアイテムをサーバ側で検索して取得するのが普通だと思う。
だけど、本家のサイトだとajaxを使用したサンプルが全く無いので、かなり厳しい。

そこで探していたら、英語だけどコード例を載せている人がいました。
Getting More From Twitter Bootstrap’s Typeahead Library

自分は一番上に出ているサンプルを少し修正して実現しきました。
("q"は自分がサーバ側で指定した名前に変更。limitはサーバ側で行うので削除)

サーバ側では、検索した結果を連想ではない普通の配列に入れて、json形式で返してあげればOKです。

また、心配していた日本語での動作ですが、特に修正せずに問題ない挙動です。

思った以上に楽だった!

【追記2013/3/26】
日本語入力に関して色々と問題がみつかったので、以下の記事で対処しています。ご覧下さい。
[Twitter Bootstrap]typeaheadでの日本語入力問題への対策

0 件のコメント:

コメントを投稿