住所検索APIサービスを使ってautocomplete

住所入力で autocomplete 入力を手軽にできる API サービスを探してたら、
以下を見つけた。

http://geoapi.heartrails.com/api.html

利用規約をよく読み利用しなければならない。
さっそく勢いにまかせて jQuery UI で実装のサンプルを書いてみた。

adres_form.js というソース名で以下を書く。

var state_data = [
   { value: '',       label: '      '  },
   { value: '北海道', label: '北海道' },
   { value: '青森県', label: '青森県' },
   { value: '岩手県', label: '岩手県' },
    :
    :
   { value: '沖縄県', label: '沖縄県' }
];

function adres_form(stateSelector, citySelector, townSelector){
   $.each(state_data, function(){
      $(stateSelector).append($('<option>', this));
   });
   var city = ;
   var town = 
;
   $(stateSelector).change(function(){
      city = ;
      town = 
;
      $(citySelector).val('');
      $(townSelector).val('');
      var state = $(stateSelector).val();
      if (state.length==0) return;
      var url = 'http://geoapi.heartrails.com/api/json?method=getCities&prefecture=' + encodeURIComponent(state);
      $.getJSON(url, function(data, status, jqXHR){
         if (status==="success"){
            $.each(data['response']['location'], function(index, cdata){
               city[index] = cdata['city'];
            });
            $(citySelector).autocomplete({
               source : city
               , change : function(event, ui){
                  town = [];
                  $(townSelector).val('');
                  var turl = 'http://geoapi.heartrails.com/api/json?method=getTowns&prefecture='
                        + encodeURIComponent(state)
                        + '&city=' + encodeURIComponent($(this).val());

                  $.getJSON(turl, function(tdata, sts, jqXHR){
                     if (sts==="success"){
                        $.each(tdata['response']['location'], function(ix, towndata){
                           town[ix] = towndata['town'];
                        });
                        $(townSelector).autocomplete({
                           source : town
                        });
                     }
                  });
               }
            });
         }
      });
   });
}

これを jQuery UI を使うようにして、さらに以下のように書く。

<style type="text/css">
.ui-autocomplete{
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
   font-size: 14px;
}
td{
   padding-left: 10px; padding-right: 10px;
   padding-bottom: 6px;
}
</style>

<script type="text/javascript" src="adres_form.js"></script>
<script type="text/javascript">
$(function(){
   adres_form($('#state'), $('#city'), $('#town'));
});
</script>

HTML body の中、、

<div>
   <table>
      <tr>
         <td><select name="state" id="state"></select></td>
         <td><input name="city" id="city"></td>
      </tr>
      <tr>
         <td colspan="2"><input name="town" id="town" size="48"></td>
      </tr>
   </table>
</div>


IEでは、以下のようになる。

f:id:posturan:20160313192619j:plain


f:id:posturan:20160313192614j:plain