웹 입력폼에 주소검색버튼 넣기(다음 API사용)
요즘은 회원가입폼을 넣을때 주소입력을 아예 빼고, 이메일만 받다가, 최근에 주소입력이 필요해서 오픈API를 찾다가 다음API를 사용해 보고 최고로 간단한 구현이라는 것을 알게 되었다.
아래는 소스 코드 입니다.
<tr>
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script>
function openDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
document.getElementById('PROFILE_TITLE').value = data.postcode1+data.postcode2+' '+data.address
//전체 주소에서 연결 번지 및 ()로 묶여 있는 부가정보를 제거하고자 할 경우,
//아래와 같은 정규식을 사용해도 된다. 정규식은 개발자의 목적에 맞게 수정해서 사용가능
//var addr = data.address.replace(/(\s|^)\(.+\)$|\S+~\S+/g, '');
//document.getElementById('addr').value = addr;
document.getElementById('PROFILE_TITLE').focus();
}
}).open();
}
</script>
<th><input type="button" onclick="openDaumPostcode()" value="주소찾기버튼" class="button default"></th>
<td style="vertical-align:middle"><input type="text" size="30" name="PROFILE_TITLE" id="PROFILE_TITLE" value="<?=$ROW['PROFILE_TITLE']?>" title="주소" class="type-text" style="width:90%"/></td>
</tr>