jQuery UI の Autocomplete ウィジェットを利用して、サジェスト検索を実装した時の備忘録

タメルヒトコトで発言者のサジェスト検索を公開した。(上のフリーワード検索の部分)
今回はこれを実装した際に利用したプラグインとその仕組みを備忘録としてまとめておく。

まずサジェスト検索を実装するにあたって、クライアント側の処理で利用できそうなプラグインを調べてみた。ざっとググってみたところ、以下の４つが候補に挙がった。

• suggest.js – http://www.enjoyxstudy.com/javascript/suggest/
• jQuery.suggest – http://polarblau.github.com/suggest/
• Autocomplete – http://archive.plugins.jquery.com/project/autocompletex
• Autocomplete – jQuery UI widget – http://jqueryui.com/autocomplete/

どのプラグインでもやりたいことは実現できそうだったけど、今回はイベントの間に処理が柔軟に設定できそうな感じがした「Autocomplete – jQuery UI widget 」を使ってみることにした。

で、そのソースはこれ。

sourceオプションにAPI側からjson形式でデータを返せばすぐ使えるお手軽な感じ。
見た目とかを変えたい場合は、付属のCSSで「ui-state-focus」とか「ui-autocomplete」のスタイルを変更できる。例えばこんな感じ、

/* サジェストリストの文字を変更する場合 */
.ui-autocomplete a  {
        font-size: 9pt;
}

簡単。