가장 쉽게 Postcodify를 적용할 수 있는 방법입니다. 국내 대부분의 웹 사이트에서 최근까지 사용해 온 주소검색 팝업 인터페이스를 따르지만, 실제 팝업창이 아닌 레이어 팝업을 사용하여 모바일 기기와의 호환성을 높였습니다.
별다른 설정이나 스타일 변경 없이도 그대로 사용 가능하며,
기존의 페이지에 적용할 때도 적절한 <input> 태그에 class 속성 몇 개만 추가하면
자동으로 찾아서 주소와 우편번호를 입력해 줍니다.
우편번호를 두 부분으로 나누어 입력하는 기능도 지원합니다.
자세한 사용 방법은 jQuery 팝업창 매뉴얼을 참조하시기 바랍니다.
웹사이트 디자인이나 브라우저 버전에 따라 팝업 레이어가 정상적으로 표시되지 않을 수도 있으니 반드시 미리 테스트해 보시기 바랍니다. 팝업 레이어 사용에 문제가 있는 경우 아래의 설명대로 검색창을 직접 구성하시는 것이 좋습니다.
<!-- 주소와 우편번호를 입력할 <input>들을 생성하고 적당한 name과 class를 부여한다 -->
<input type="text" name="" class="postcodify_postcode5" value="" />
<button id="postcodify_search_button">검색</button><br />
<input type="text" name="" class="postcodify_address" value="" /><br />
<input type="text" name="" class="postcodify_details" value="" /><br />
<input type="text" name="" class="postcodify_extra_info" value="" /><br />
<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<!-- "검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다 -->
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>
이미 jQuery를 사용하고 있는 경우에는 search.min.js 파일만 로딩하셔도 됩니다.
팝업창보다 훨씬 다양한 설정과 콜백 함수를 사용하여 Postcodify의 작동 방식을 변경할 수 있습니다. 팝업창이 아닌 주소입력 페이지 자체에 검색 기능을 삽입하고 싶은 경우, 검색 결과가 폼에 입력되는 방식을 커스터마이징하고 싶은 경우, 사이트 디자인에 맞춰 아주 자세한 부분까지 스타일링하고 싶은 경우, 자체 검색서버를 구축하는 경우에 추천합니다.
공식 CDN에서 제공하는 search.css를 링크하면 검색 결과에 기본적인 스타일을 적용해 줍니다.
이 파일을 그대로 사용하셔도 되고, 사이트 디자인에 맞춰 색상이나 글꼴 등을 변경하셔도 됩니다.
자세한 설정 방법은 jQuery 플러그인 매뉴얼을 참조하시기 바랍니다.
<!-- 검색 기능을 표시할 <div>를 생성한다 -->
<div id="postcodify"></div>
<!-- 주소와 우편번호를 입력할 <input>들을 생성하고 적당한 name과 id를 부여한다 -->
<input type="text" name="" id="postcode" value="" /><br />
<input type="text" name="" id="address" value="" /><br />
<input type="text" name="" id="details" value="" /><br />
<input type="text" name="" id="extra_info" value="" /><br />
<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<!-- 위에서 생성한 <div>에 검색 기능을 표시하고, 결과를 입력할 <input>들과 연동한다 -->
<script>
$(function() { $("#postcodify").postcodify({
insertPostcode5 : "#postcode",
insertAddress : "#address",
insertDetails : "#details",
insertExtraInfo : "#extra_info",
hideOldAddresses : false
}); });
</script>
이미 jQuery를 사용하고 있는 경우에는 search.min.js 파일만 로딩하셔도 됩니다.