Google Suggest APIをjQuery Autocompleteから呼び出す

Google Suggest APIを使用して、予測変換を行います。
jQueryのAutocompleteプラグインを使用すると、簡単に予測変換のリスト表示が可能になります。

kindterの実装を例に取り、Ruby on Railsの場合で説明します。

まず、jQuery Autocompleteを取得します。

jquery.autocomplete.jsの配布場所がよくわかりませんでした。。
私は以下のデモサイトから、「jquery.autocomplete.js」と「jquery.autocomplete.css」を持ってきました。

http://view.jquery.com/trunk/plugins/autocomplete/demo/

以下のファイルを所定の場所に配置します。

・jquery-1.4.2.js
・jquery.autocomplete.js
・jquery.autocomplete.css

erbファイル

<script type="text/javascript">
$(document).ready(function(){
  $('#in_text').autocomplete('/twitter/suggest').
      result(function(event, item) {
    $('#tweet_message').val($('#tweet_message').val() + item[0]);
  });
});
</script>

以下にローマ字で文字を入力してください。Google Suggest APIで、予測変換候補が表示されます。<br />
<input type="text" size="30" name="in_text" id="in_text"/>
<br />

<% form_for :tweet, @tweet, :url => { :action => 'tweet' } do |f| %>
  メッセージ（編集可能）<br />
  <%= f.text_area :message, :size => '60x2' %>
  <%= submit_tag 'つぶやく' %><br />
  <%= render :partial => 'layouts/errors' %>
<% end %>

$(document).ready(function(){
  // テキストボックスにイベントを登録して、予測変換を行う。
  $('#in_text').autocomplete('/twitter/suggest').
      result(function(event, item) {
    // 予測変換候補から選択された場合の処理
    // 下のテキストエリアに予測変換のワードを追加する。
    $('#tweet_message').val($('#tweet_message').val() + item[0]);
  });
});

jQuery Autocompleteを使用して、予測変換を行うために、テキストボックにイベントを登録します。autocomplete()に予測変換のリストを返すURLを指定します。
ここでは、Twitterコントローラのsuggestアクションを指定しています。

require 'net/http'
require 'json'

  : 略

  def suggest
    # 予測変換元のワードを取得
    search_text = params[:q]
    # Google Suggest APIのサーバを指定
    http  = Net::HTTP.new('suggestqueries.google.com', 80)
    # json形式で予測変換候補を取得する
    query = "/complete/search?hl=ja&qu=#{search_text}&json=t"
    req = Net::HTTP::Get.new(query)
    res = http.request(req)
    json = JSON.parse(res.body)
    # 予測変換候補を改行で区切りで返す。
    render :text => proc{|response, output|
      json[1].each do |data|
        output.write(data + "\n");
      end
    }
  end

jQuery Autocompleteでは、予測変換候補のリストを改行区切りで渡せばよいので、Google Suggest APIを「net/http」で呼び出して、結果を改行区切りに変換して渡します。