【Rails4】【bootstrap3】郵便番号から住所検索する。

Ruby

環境

Rails 4.1.8
Bootstrap3

目的

郵便番号を入力し、検索ボタンを押下すると、住所欄に検索結果が自動補完されること。
郵便番号欄にフォーカスが当たるとツールチップが表示されること

*1

ソースコード

郵便番号検索には「AjaxZip3」というライブラリを使用した。

AjaxZip3の使い方 | Webサイト制作支援 | ShanaBrian Website

HTML(一部抜粋)

  <script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

  <div class="form-group">
    <%= f.label :zipcode, "郵便番号/住所", :class => 'control-label col-md-2' %>
    <div class="controls col-md-3">
      <div class="input-group">
        <span class="input-group-addon">〒</span>
        <%= f.text_field :zipcode, :class => 'form-control', id:'zipcode_field' %>
        <span class="input-group-btn">
          <button id="search_from_zipcode" class="btn btn-default" type="button" onclick="AjaxZip3.zip2addr('order[zipcode]','','order[address]','order[address]');", data-original-title="<%= t('messages.search_address') %>">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
    <div class="controls col-md-6">
      <%= f.text_field :address, :class => 'form-control' %>
    </div>
  </div>

Javascript(Coffeescript)

$ ->
  $('#zipcode_field').on("focus", (event) ->
    $('#search_from_zipcode').tooltip('show', {
      animation : false,
      placement : 'top',
      trigger   : 'manual'
    });
  );
AjaxZip3.zip2addr について

引数は次の通り。セレクタはすべてname属性で。
(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字)
AjaxZip3の使い方 | Webサイト制作支援 | ShanaBrian Website

ツールチップについて

bootstrapのtooltipを使用。
ツールチップのトリガーとなる要素とツールチップを出したい要素が異なったので、イベントをキャッチしてmanualでtooltipを'show'している。
また、tooltipのオプションは要素内のdata属性でも指定できる。
上記のコードでは'data-original-title'でメッセージを個別に定義している。
Twitter Bootstrap使い方-javascript-v2.0.4

*1:ツールチップの色が薄いのはキャプチャ取得によるもの。