読者です 読者をやめる 読者になる 読者になる

住所から郵便番号変換のAutoComplete対応版

住所から郵便番号変換のメモ - Hidepyonのブログ
jquery UI AutoComplete対応してみました。

前回同様「ricollab 郵便番号検索」を利用

郵便番号 または 住所 → 郵便番号 と 住所 を出力します。

住所項目に適当な 郵便番号または住所を入力してみてください。

Demo

郵便番号問合せ
住所    
郵便番号
住所








ソース

<!-- スタイルシート設定 -->
<!-- jquery UI スタイルシート -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css"/>
<!-- autocomplete スクロール表示 -->
<style type="text/css">
.ui-autocomplete {
  max-height: 250px;overflow-y: auto;overflow-x: hidden;padding-right: 20px;
}
* html .ui-autocomplete {
  width: 400px;height: 250px;
}
</style>

    <!-- Jquery -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Jquery UI -->
    <script language="javascript" type="text/javascript" charset="utf-8" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript">
$(function () {
  var txt_AddressToZip = document.getElementById('txt_AddressToZip');
  //==============================
  // AutoCompleteセット
  //==============================
  var AutoComp_On = function () {
    AutoComp_Off();
    var $lbl_Msg = $("#lbl_Msg");

$(txt_AddressToZip).autocomplete({
   source: function (request, response) {
     $.ajax({
       url: "http://zip.ricollab.jp/search"
       , data: { q: request.term, type: "json", count: 50 }
       , dataType: "jsonp"
     }).done(function (data) {
       var result = $.map(data.result, function (item) {
         var zip = item.zipcode.substring(0, 3) + "-" + item.zipcode.substring(3);
         return { label: zip+" "+item.address , value: {"adr":item.address,"zip":zip} }
       });
       var msg = data.totalResults.toString() + "件";
       $lbl_Msg.text((data.totalResults > 50) ? msg + "中50件表示" : msg)
       response(result);
     }).fail(function (jqXHR, textStatus, errorThrown) {
       alert(textStatus);
     });
  }
  , delay: 50
  , minLength: 3
  , select: function (event, ui) {
     if (ui.item) {
       this.value = ui.item.value.adr;
       $('#txt_Address').val(ui.item.value.adr.replace("−", "-"));
       $('#txt_Zipcode').val(ui.item.value.zip);
       return false;
     }
  }
  , search: function (event, ui) {
    if (event.keyCode == 229) return false;
    if (/^\d{3}\-\d{1,4}$/.test(txt_AddressToZip.value)) {
      txt_AddressToZip.value = txt_AddressToZip.value.replace("-", "");
    }
    return true;
  }
  , focus: function (event, ui) {
    $(this).val(ui.item.value.adr);
    return false;
  }
     //,open: function(event, ui){}
     //,close: function(event, ui){}
  }).keyup(function (event) {
    if (event.keyCode == 13 || event.keyCode == 8) {
      $(this).autocomplete("search");
    }
  }).data("autocomplete")._renderItem = function (ul, item) {
    var wk = "<a><table style='font-size:9pt;'><tbody><tr>";
    wk += "<td style='width:090px'>〒" + item.value.zip + "</td>";
    wk += "<td style='width:300px'>" + item.value.adr + "</td>";
    wk += "</tr></tbody></table></a>";
    return $("<li></li>").data("item.autocomplete", item).append(wk).appendTo(ul);
  };
}
  var AutoComp_Off = function (p) {
    $('#txt_AddrToZip').autocomplete("destroy");
  }
  //==============================
  // リセット
  //==============================
  var fn_RST = function () {
    $('#txt_AddressToZip').val("");
    $('#txt_Zipcode').val("");
    $('#txt_Address').val("");
  }
  //==============================
  // 終了
  //==============================
  var fn_END = function () {
//  AutoComp_Off();
    var ans = "";
    var address = $('#txt_Address').val();
    var zipcode = $('#txt_Zipcode').val();
    alert("Answer:address:"+address+":zipcode:"+zipcode);
  }

  $("#cmdEND").click(function () {
    fn_END();
  });
  $("#cmdRST").click(function () {
    fn_RST();
  });
  //====================================================
  //初期値設定
  //====================================================
  txt_AddressToZip.focus();
  AutoComp_On();
  setTimeout(function(){$('#txt_AddressToZip').autocomplete("search");},2000);
});
</script>