住所入力で 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では、以下のようになる。