[자바스크립트] 다음 주소 검색 API 사용법, 예제 (daum postcode)

Daum 우편번호 서비스 API를 활용하여 주소 검색 기능을 제공합니다. 사용자가 우편번호와 주소를 입력할 수 있으며, 선택한 주소의 정보를 입력 필드에 자동으로 채웁니다.

사용자가 주소를 입력 후 선택하면 실행되는 콜백 함수 (oncomplete)에서 R은 도로명 주소, J는 지번 주소를 나타냅니다.
간단한 소스 코드 응용해서 사용하시면 됩니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function openZipSearch() {
    new daum.Postcode({
    	oncomplete: function(data) {     
		var addr = ''; 
		if (data.userSelectedType === 'R') { 
			addr = data.roadAddress;
		} else {
			addr = data.jibunAddress;
		}

		$("#zip_code").val(data.zonecode);
		$("#addr").val(addr);
		$("#addr_dtl").val("");
		$("#addr_dtl").focus();
        }
    }).open();
}
</script>
<div>
	<label>주소</label>
	<div>
		<input type="text"  id="zip_code" name="zip_code" onclick="openZipSearch();" readonly="readonly" placeholder="우편번호" style="width:250px;">
		<input type="text"  id="addr" name="addr" onclick="openZipSearch();" readonly="readonly" placeholder="기본주소"  style="width:250px;">
		<input type="text"  id="addr_dtl" name="addr_dtl" placeholder="상세주소"  style="width:250px;">
	</div>
</div>

다음 주소 검색

 

사용자가 선택 한 주소