### Example Address Data - Road Name Search

Source: https://postcode.map.kakao.com/guide

Example of the address data object returned when searching by road name.

```json
{
  "address": "경기 성남시 분당구 판교역로 166",
  "addressEnglish": "166 Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea",
  "addressType": "R",
  "userSelectedType": "R",
  "roadAddress": "경기 성남시 분당구 판교역로 166",
  "roadAddressEnglish": "166 Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea",
  "jibunAddress": "경기 성남시 분당구 백현동 532",
  "jibunAddressEnglish": "532 Baekhyeon-dong, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea",
  "buildingName": "에이치스퀘어 엔동"
}
```

--------------------------------

### Set Timer for Guide Area Highlighting

Source: https://postcode.map.kakao.com/guide

Works with 'pleaseReadGuide' to set the duration for highlighting the guide area. The default is 1.5 seconds. Accepts values between 0.1 and 60 seconds.

```javascript
pleaseReadGuideTimer: 1.5
```

--------------------------------

### Integrate Theme Object with Kakao Postcode Service (Open)

Source: https://postcode.map.kakao.com/guide

Instantiate the Kakao Postcode service with your custom theme object and open it as a modal window. Refer to the examples and attribute tabs for detailed constructor settings.

```javascript
new kakao.Postcode({
  theme: themeObj
}).open();
```

--------------------------------

### Highlight Guide Area for Many Search Results

Source: https://postcode.map.kakao.com/guide

Emphasizes the guide area below the search bar when there are many search results. Accepts page numbers (3-20) to trigger the highlighting.

```javascript
pleaseReadGuide: 5
```

--------------------------------

### Display Road Name and Lot Number Addresses in a Popup

Source: https://postcode.map.kakao.com/guide

This example demonstrates how to use the Kakao Postcode API to display both road name and lot number addresses in a popup window. It includes input fields for postcode, road address, lot number address, and detailed address. The script handles address formatting based on legal regulations and displays expected addresses if the user selects 'Do not select'.

```html
<input type="text" id="sample4_postcode" placeholder="우편번호"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <span id="guide" style="color:#999;display:none"></span> <input type="text" id="sample4_detailAddress" placeholder="상세주소"> <input type="text" id="sample4_extraAddress" placeholder="참고항목">
```

```javascript
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script> //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다. function sample4_execDaumPostcode() { new kakao.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 도로명 주소의 노출 규칙에 따라 주소를 표시한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var roadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 참고 항목 변수 // 법정동명이 있을 경우 추가한다. (법정리는 제외) // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. if(data.bname !== '' && /[동로가]$/.test(data.bname)){ extraRoadAddr += data.bname; } // 건물명이 있고, 공동주택일 경우 추가한다. if(data.buildingName !== '' && data.apartment === 'Y'){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('sample4_postcode').value = data.zonecode; document.getElementById("sample4_roadAddress").value = roadAddr; document.getElementById("sample4_jibunAddress").value = data.jibunAddress; // 참고항목 문자열이 있을 경우 해당 필드에 넣는다. if(roadAddr !== ''){ document.getElementById("sample4_extraAddress").value = extraRoadAddr; } else { document.getElementById("sample4_extraAddress").value = ''; } var guideTextBox = document.getElementById("guide"); // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다. if(data.autoRoadAddress) { var expRoadAddr = data.autoRoadAddress + extraRoadAddr; guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')'; guideTextBox.style.display = 'block'; } else if(data.autoJibunAddress) { var expJibunAddr = data.autoJibunAddress; guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')'; guideTextBox.style.display = 'block'; } else { guideTextBox.innerHTML = ''; guideTextBox.style.display = 'none'; } } }).open(); }
```

--------------------------------

### Integrate Theme Object with Kakao Postcode Service (Embed)

Source: https://postcode.map.kakao.com/guide

Embed the Kakao Postcode service into a specified target element on your page using your custom theme object. Refer to the examples and attribute tabs for detailed constructor settings.

```javascript
new kakao.Postcode({
  theme: themeObj
}).embed(target);
```

--------------------------------

### Embed Kakao Postcode using iframe

Source: https://postcode.map.kakao.com/guide

This example demonstrates embedding the Kakao Postcode search functionality into a specific element on your page using an iframe. It includes input fields for postcode, address, and details, along with a button to trigger the search and a close button for the iframe layer. Note the iOS compatibility warning regarding fixed positioning.

```html
<input type="text" id="sample2_postcode" placeholder="우편번호"> <input type="button" onclick="sample2_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample2_address" placeholder="주소"><br> <input type="text" id="sample2_detailAddress" placeholder="상세주소"> <input type="text" id="sample2_extraAddress" placeholder="참고항목"> 
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 --> 
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;"> 
<img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>
```

```javascript
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
// 우편번호 찾기 화면을 넣을 element
var element_layer = document.getElementById('layer');

function closeDaumPostcode() {
  // iframe을 넣은 element를 안보이게 한다.
  element_layer.style.display = 'none';
}

function sample2_execDaumPostcode() {
  new kakao.Postcode({
    oncomplete: function(data) {
      // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
      // 각 주소의 노출 규칙에 따라 주소를 조합한다.
      // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
      var addr = ''; // 주소 변수
      var extraAddr = ''; // 참고항목 변수
      //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
      if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
        addr = data.roadAddress;
      } else { // 사용자가 지번 주소를 선택했을 경우(J)
        addr = data.jibunAddress;
      }
      // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
      if(data.userSelectedType === 'R'){
        // 법정동명이 있을 경우 추가한다. (법정리는 제외)
        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
        if(data.bname !== '' && /[동로가]$/.test(data.bname)){
          extraAddr += data.bname;
        }
        // 건물명이 있고, 공동주택일 경우 추가한다.
        if(data.buildingName !== '' && data.apartment === 'Y'){
          extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
        }
        // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
        if(extraAddr !== ''){
          extraAddr = ' (' + extraAddr + ')';
        }
        // 조합된 참고항목을 해당 필드에 넣는다.
        document.getElementById("sample2_extraAddress").value = extraAddr;
      } else {
        document.getElementById("sample2_extraAddress").value = '';
      }
      // 우편번호와 주소 정보를 해당 필드에 넣는다.
      document.getElementById('sample2_postcode').value = data.zonecode;
      document.getElementById("sample2_address").value = addr;
      // 커서를 상세주소 필드로 이동한다.
      document.getElementById("sample2_detailAddress").focus();
      // iframe을 넣은 element를 안보이게 한다.
      // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
      element_layer.style.display = 'none';
    },
    width : '100%',
    height : '100%',
    maxSuggestItems : 5
  }).embed(element_layer);

  // iframe을 넣은 element를 보이게 한다.
  element_layer.style.display = 'block';

  // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
  initLayerPosition();
}

// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
function initLayerPosition(){
  var width = 300; //우편번호서비스가 들어갈 element의 width
  var height = 400; //우편번호서비스가 들어갈 element의 height
  var borderWidth = 5; //샘플에서 사용하는 border의 두께
  // 위에서 선언한 값들을 실제 element에 넣는다.
  element_layer.style.width = width + 'px';
  element_layer.style.height = height + 'px';
  element_layer.style.border = borderWidth + 'px solid';
  // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
  element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
  element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
}
</script>
```

--------------------------------

### Open Kakao Postcode Popup with Search Query

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup pre-filled with a specific search query. This is useful for guiding users to a particular address or area.

```javascript
new kakao.Postcode({...}).open({
  q: '판교역로 166'
});
```

--------------------------------

### Initialize Kakao Postcode with oncomplete callback

Source: https://postcode.map.kakao.com/guide

Defines a callback function to process address information when a user selects an item from the postcode search results. If not defined, the search works, but clicking results has no effect.

```javascript
new kakao.Postcode({
  oncomplete: function(data) {
    // data is an object containing the selected address information.
  }
});
```

--------------------------------

### Kakao Postcode Constructor

Source: https://postcode.map.kakao.com/guide

Basic initialization of the Kakao Postcode constructor.

```javascript
new kakao.Postcode({
```

--------------------------------

### Enable Shorthand for Address Components

Source: https://postcode.map.kakao.com/guide

Abbreviates the 'city' and 'province' parts of the searched address and returned data for Korean addresses. Default is true.

```javascript
shorthand: true
```

--------------------------------

### Initialize and Open Postcode Search

Source: https://postcode.map.kakao.com/guide

This JavaScript code initializes the Kakao Postcode search and opens the search popup. The `oncomplete` function is called when a user selects an address.

```javascript
new kakao.Postcode({
    oncomplete: function(data) {
      // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
      // 예제를 참고하여 다양한 활용법을 확인해 보세요.
    }
  }).open();
```

--------------------------------

### HTML for Address Input and Map Display

Source: https://postcode.map.kakao.com/guide

This snippet includes the HTML elements for an address input field, a search button, and a div to display the map. It also includes the necessary script tags for the Postcode and Map APIs.

```html
<input type="text" id="sample5_address" placeholder="주소"> <input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br> <div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div> <script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 사용하세요&libraries=services"></script>
```

--------------------------------

### Kakao.Postcode.open()

Source: https://postcode.map.kakao.com/guide

Opens the postcode search screen as a pop-up window. Allows specifying search terms, pop-up position, title, and behavior like auto-closing.

```APIDOC
## Kakao.Postcode.open()

### Description
Opens the postcode search screen as a pop-up window. This function allows for pre-setting search queries, defining the pop-up's position on the screen, customizing the pop-up title, and controlling whether the pop-up automatically closes after a selection.

### Method
JavaScript

### Endpoint
N/A (JavaScript function)

### Parameters
#### Function Parameters
- **options** (object) - Optional - Configuration options for the pop-up.
  - **q** (string) - Optional - A search term to pre-fill the search input.
  - **left** (number) - Optional - The x-coordinate for the pop-up's position.
  - **top** (number) - Optional - The y-coordinate for the pop-up's position.
  - **popupTitle** (string) - Optional - The title to display in the pop-up's title bar. Defaults to 'Kakao Postcode Service'.
  - **popupKey** (string) - Optional - A key to prevent multiple pop-ups from opening. Defaults to '_blank'.
  - **autoClose** (boolean) - Optional - Determines if the pop-up automatically closes after a selection. Defaults to true.

### Request Example
```javascript
new kakao.Postcode({ /* constructor options */ }).open({
  q: '판교역로 166',
  left: (window.screen.width / 2) - (width / 2),
  top: (window.screen.height / 2) - (height / 2),
  popupTitle: '우편번호 검색 팝업',
  popupKey: 'popup1',
  autoClose: false
});
```

### Response
N/A (This function modifies the UI directly)
```

--------------------------------

### JavaScript for Kakao Map and Postcode Integration

Source: https://postcode.map.kakao.com/guide

This JavaScript code initializes the map, geocoder, and marker. It also defines the function to execute the Postcode search upon button click, which then uses the geocoder to find coordinates and update the map.

```javascript
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
          center: new kakao.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
          level: 5 // 지도의 확대 레벨
      };

//지도를 미리 생성
var map = new kakao.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new kakao.maps.services.Geocoder();
//마커를 미리 생성
var marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(37.537187, 127.005476),
    map: map
});

function sample5_execDaumPostcode() {
    new kakao.Postcode({
        oncomplete: function(data) {
            var addr = data.address; // 최종 주소 변수

            // 주소 정보를 해당 필드에 넣는다.
            document.getElementById("sample5_address").value = addr;

            // 주소로 상세 정보를 검색
            geocoder.addressSearch(data.address, function(results, status) {
                // 정상적으로 검색이 완료됐으면
                if (status === kakao.maps.services.Status.OK) {
                    var result = results[0]; //첫번째 결과의 값을 활용

                    // 해당 주소에 대한 좌표를 받아서
                    var coords = new kakao.maps.LatLng(result.y, result.x);
                    // 지도를 보여준다.
                    mapContainer.style.display = "block";
                    map.relayout();
                    // 지도 중심을 변경한다.
                    map.setCenter(coords);
                    // 마커를 결과값으로 받은 위치로 옮긴다.
                    marker.setPosition(coords)
                }
            });
        }
    }).open();
}
```

--------------------------------

### Address Data Object in oncomplete

Source: https://postcode.map.kakao.com/guide

Comment within the oncomplete callback explaining the 'data' object.

```javascript
    // data is an object containing the selected address information.
    // Detailed explanation can be found in the list below.
```

--------------------------------

### Define Custom Theme Object for Kakao Postcode Service

Source: https://postcode.map.kakao.com/guide

Create a theme object to customize various color aspects of the postcode service, such as background, text, and borders. Use hex color codes (e.g., #F00, #FF0000). Uncomment or remove lines for colors that do not need to be changed.

```javascript
var themeObj = {
  //bgColor: "", //바탕 배경색
  //searchBgColor: "", //검색창 배경색
  //contentBgColor: "", //본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
  //pageBgColor: "", //페이지 배경색
  //textColor: "", //기본 글자색
  //queryTextColor: "", //검색창 글자색
  //postcodeTextColor: "", //우편번호 글자색
  //emphTextColor: "", //강조 글자색
  //outlineColor: "" //테두리
};
```

--------------------------------

### Define onresize Callback for Postcode Service

Source: https://postcode.map.kakao.com/guide

Define a callback function to handle screen size changes in the postcode service. This is useful for adjusting UI elements based on the service's height, which can change frequently. Not supported in popup mode.

```javascript
new kakao.Postcode({
  onresize: function(size) {
    // size is an object containing the size data of the postcode search screen.
  }
});
```

--------------------------------

### Open Kakao Postcode Popup with Position

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup at a specified position on the screen. Ensure width and height are defined in the constructor for accurate positioning.

```javascript
var width = 500; //팝업의 너비
var height = 600; //팝업의 높이
new kakao.Postcode({
  width: width, //생성자에 크기 값을 명시적으로 지정해야 합니다.
  height: height,
  ...
}).open({
  left: (window.screen.width / 2) - (width / 2),
  top: (window.screen.height / 2) - (height / 2)
});
```

--------------------------------

### Configure Auto Mapping for Addresses

Source: https://postcode.map.kakao.com/guide

Controls whether to automatically map road and Jibun addresses. When set to true (default), users can choose 'Deselect'. Setting to false removes the 'Deselect' option, forcing users to select a mapped address.

```javascript
autoMappingRoad: true,
autoMappingJibun: true
```

```javascript
autoMapping: true
```

--------------------------------

### Display Road and Lot Number Addresses in Popup

Source: https://postcode.map.kakao.com/guide

This JavaScript code populates input fields with road name and lot number addresses. It also handles displaying extra address information and provides guidance for expected addresses based on user selection.

```javascript
document.getElementById("sample4_roadAddress").value = roadAddr;
```

```javascript
document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
```

```javascript
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
```

```javascript
if(roadAddr !== ''){
```

```javascript
document.getElementById("sample4_extraAddress").value = extraRoadAddr;
```

```javascript
} else {
```

```javascript
document.getElementById("sample4_extraAddress").value = '';
```

```javascript
}
```

```javascript
var guideTextBox = document.getElementById("guide");
```

```javascript
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
```

```javascript
if(data.autoRoadAddress) {
```

```javascript
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
```

```javascript
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
```

```javascript
guideTextBox.style.display = 'block';
```

```javascript
} else if(data.autoJibunAddress) {
```

```javascript
var expJibunAddr = data.autoJibunAddress;
```

```javascript
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
```

```javascript
guideTextBox.style.display = 'block';
```

```javascript
} else {
```

```javascript
guideTextBox.innerHTML = '';
```

```javascript
guideTextBox.style.display = 'none';
```

```javascript
}
```

```javascript
}
```

```javascript
}).open();
```

```javascript
}
```

--------------------------------

### Enable Animation for Postcode Service

Source: https://postcode.map.kakao.com/guide

Adds an animation effect to the postcode search screen. The default value is false.

```javascript
animation: true
```

--------------------------------

### JavaScript Functions for Postcode Search and Folding

Source: https://postcode.map.kakao.com/guide

This script contains the core logic for the postcode search. It includes functions to execute the search, handle the results, and fold the search interface.

```javascript
var element_wrap = document.getElementById('wrap');

function foldDaumPostcode() {
  // iframe을 넣은 element를 안보이게 한다.
  element_wrap.style.display = 'none';
}

function sample3_execDaumPostcode() {
  // 현재 scroll 위치를 저장해놓는다.
  var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
  new kakao.Postcode({
    oncomplete: function(data) {
      // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

      // 각 주소의 노출 규칙에 따라 주소를 조합한다.
      // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
      var addr = ''; // 주소 변수
      var extraAddr = ''; // 참고항목 변수

      //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
      if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
        addr = data.roadAddress;
      } else { // 사용자가 지번 주소를 선택했을 경우(J)
        addr = data.jibunAddress;
      }

      // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
      if(data.userSelectedType === 'R'){
        // 법정동명이 있을 경우 추가한다. (법정리는 제외)
        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
        if(data.bname !== '' && /[동로가]$/.test(data.bname)){
          extraAddr += data.bname;
        }
        // 건물명이 있고, 공동주택일 경우 추가한다.
        if(data.buildingName !== '' && data.apartment === 'Y'){
          extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
        }
        // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
        if(extraAddr !== ''){
          extraAddr = ' (' + extraAddr + ')';
        }
        // 조합된 참고항목을 해당 필드에 넣는다.
        document.getElementById("sample3_extraAddress").value = extraAddr;
        
      } else {
        document.getElementById("sample3_extraAddress").value = '';
      }

      // 우편번호와 주소 정보를 해당 필드에 넣는다.
      document.getElementById('sample3_postcode').value = data.zonecode;
      document.getElementById("sample3_address").value = addr;
      // 커서를 상세주소 필드로 이동한다.
      document.getElementById("sample3_detailAddress").focus();

      // iframe을 넣은 element를 안보이게 한다.
      // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
      element_wrap.style.display = 'none';

      // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
      document.body.scrollTop = currentScroll;
    },
    // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
    onresize : function(size) {
      element_wrap.style.height = size.height+'px';
    },
    width : '100%',
    height : '100%'
  }).embed(element_wrap);

  // iframe을 넣은 element를 보이게 한다.
  element_wrap.style.display = 'block';
}
```

--------------------------------

### Show More Administrative Dong Information

Source: https://postcode.map.kakao.com/guide

Displays more administrative dong information. If enabled, it unconditionally shows and returns data when administrative and legal dongs differ. Defaults to false.

```javascript
showMoreHName: true
```

--------------------------------

### Load Kakao Postcode Service

Source: https://postcode.map.kakao.com/guide

Include this script tag in your HTML to load the Kakao Postcode service. This is the primary method for integrating the service.

```html
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
```

--------------------------------

### Embed Kakao Postcode Map with Resizable Iframe

Source: https://postcode.map.kakao.com/guide

This snippet demonstrates how to embed the Kakao Postcode Map into a webpage using an iframe. It includes functionality to dynamically adjust the iframe height based on the content, preventing scrollbars and ensuring a smooth user experience. The `onresize` attribute is crucial for this dynamic adjustment.

```html
<input type="text" id="sample3_postcode" placeholder="우편번호"> <input type="button" onclick="sample3_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample3_address" placeholder="주소"><br> <input type="text" id="sample3_detailAddress" placeholder="상세주소"> <input type="text" id="sample3_extraAddress" placeholder="참고항목"> <div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"> <img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼"> </div> <script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
```

```javascript
var element_wrap = document.getElementById('wrap'); function foldDaumPostcode() { element_wrap.style.display = 'none'; } function sample3_execDaumPostcode() { var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop); new kakao.Postcode({ oncomplete: function(data) { var addr = ''; var extraAddr = ''; if (data.userSelectedType === 'R') { addr = data.roadAddress; } else { addr = data.jibunAddress; } if(data.userSelectedType === 'R'){ if(data.bname !== '' && /[동로가]$/.test(data.bname)){ extraAddr += data.bname; } if(data.buildingName !== '' && data.apartment === 'Y'){ extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); } if(extraAddr !== ''){ extraAddr = ' (' + extraAddr + ')'; } document.getElementById("sample3_extraAddress").value = extraAddr; } else { document.getElementById("sample3_extraAddress").value = ''; } document.getElementById('sample3_postcode').value = data.zonecode; document.getElementById("sample3_address").value = addr; document.getElementById("sample3_detailAddress").focus(); element_wrap.style.display = 'none'; document.body.scrollTop = currentScroll; }, onresize : function(size) { element_wrap.style.height = size.height+'px'; }, width : '100%', height : '100%' }).embed(element_wrap); element_wrap.style.display = 'block'; }
```

--------------------------------

### Open Kakao Postcode Popup

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup. Use this for a standard modal address lookup experience.

```javascript
new kakao.Postcode({...}).open();
```

--------------------------------

### Define onclose Callback for Postcode Service

Source: https://postcode.map.kakao.com/guide

Define a callback function that is executed when the postcode search screen is closed. It receives a state parameter indicating how the screen was closed (e.g., by user action or completion).

```javascript
new kakao.Postcode({
  onclose: function(state) {
    // state is a status variable indicating how the postcode search screen was closed.
    if (state === 'FORCE_CLOSE') {
      // Code to execute if the user closed the popup via the browser's close button.
    } else if (state === 'COMPLETE_CLOSE') {
      // Code to execute if the popup was closed after selecting a search result.
      // This runs after the oncomplete callback function has finished.
    }
  }
});
```

--------------------------------

### Closing Postcode Constructor

Source: https://postcode.map.kakao.com/guide

Closing parenthesis and semicolon for the Kakao Postcode constructor.

```javascript
});
```

--------------------------------

### oncomplete Callback Function

Source: https://postcode.map.kakao.com/guide

The oncomplete callback function for Kakao Postcode, which receives address data.

```javascript
  oncomplete: function(data) {
    // data is an object containing the selected address information.
  }
```

--------------------------------

### Embed Kakao Postcode Finder in Iframe with Search Query

Source: https://postcode.map.kakao.com/guide

Embeds the Kakao Postcode search interface in an iframe, pre-filled with a specific search query. This allows for a targeted address search within the embedded component.

```javascript
new kakao.Postcode({...})..embed(element, {
  q: '판교역로 166'
});
```

--------------------------------

### Open Kakao Postcode Popup with Unique Key

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup with a unique key to prevent multiple popups from opening simultaneously. The default key is '_blank', which allows multiple popups.

```javascript
new kakao.Postcode({...}).open({
  popupKey: 'popup1' //팝업창 Key값 설정 (영문+숫자 추천)
});
```

--------------------------------

### Control Maximum Suggest Items

Source: https://postcode.map.kakao.com/guide

Adjusts the maximum number of suggestions displayed below the search bar as the user types. The default is 10.

```javascript
maxSuggestItems: 10
```

--------------------------------

### Define onsearch Callback for Postcode Service

Source: https://postcode.map.kakao.com/guide

Define a callback function that is triggered when a search is performed within the postcode service. It receives data about the search query and the number of results.

```javascript
new kakao.Postcode({
  onsearch: function(data) {
    // data is an object containing the search query and the count of search results.
  }
});
```

--------------------------------

### Kakao.Postcode.embed()

Source: https://postcode.map.kakao.com/guide

Embeds the postcode search screen within an iframe. Requires a target element for insertion and supports pre-setting search queries and controlling auto-closing behavior.

```APIDOC
## Kakao.Postcode.embed()

### Description
Embeds the postcode search screen into a specified HTML element as an iframe. This method allows for pre-setting search queries and controlling whether the embedded layer automatically closes after a selection.

### Method
JavaScript

### Endpoint
N/A (JavaScript function)

### Parameters
#### Function Parameters
- **element** (HTMLElement) - Required - The HTML element where the iframe will be inserted.
- **options** (object) - Optional - Configuration options for the embedded search.
  - **q** (string) - Optional - A search term to pre-fill the search input.
  - **autoClose** (boolean) - Optional - Determines if the embedded layer automatically closes after a selection. Defaults to true.

### Request Example
```javascript
new kakao.Postcode({ /* constructor options */ }).embed(element, {
  q: '판교역로 166',
  autoClose: false
});
```

### Response
N/A (This function modifies the UI directly)
```

--------------------------------

### Enable Focus on Input Field

Source: https://postcode.map.kakao.com/guide

Automatically sets focus to the search input field after the postcode search is executed. This feature is only supported on PC platforms.

```javascript
focusInput: true
```

--------------------------------

### Execute Daum Postcode Search

Source: https://postcode.map.kakao.com/guide

This JavaScript function is called when the '우편번호 찾기' button is clicked. It initializes and opens the Kakao Postcode search modal.

```javascript
function sample6_execDaumPostcode() {
  new kakao.Postcode({
    oncomplete: function(data) {
      // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
      // 각 주소의 노출 규칙에 따라 주소를 조합한다.
      // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
      var addr = ''; // 주소 변수
      var extraAddr = ''; // 참고항목 변수

      //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
      if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
        addr = data.roadAddress;
      } else { // 사용자가 지번 주소를 선택했을 경우(J)
        addr = data.jibunAddress;
      }

      // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
      if(data.userSelectedType === 'R'){
        // 법정동명이 있을 경우 추가한다. (법정리는 제외)
        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
        if(data.bname !== '' && /[동로가]$/.test(data.bname)){
          extraAddr += data.bname;
        }
        // 건물명이 있고, 공동주택일 경우 추가한다.
        if(data.buildingName !== '' && data.apartment === 'Y'){
          extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
        }
        // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
        if(extraAddr !== ''){
          extraAddr = ' (' + extraAddr + ')';
        }
        // 조합된 참고항목을 해당 필드에 넣는다.
        document.getElementById("sample6_extraAddress").value = extraAddr;
      } else {
        document.getElementById("sample6_extraAddress").value = '';
      }

      // 우편번호와 주소 정보를 해당 필드에 넣는다.
      document.getElementById('sample6_postcode').value = data.zonecode;
      document.getElementById("sample6_address").value = addr;
      // 커서를 상세주소 필드로 이동한다.
      document.getElementById("sample6_detailAddress").focus();
    }
  }).open();
}
```

--------------------------------

### Set Fixed Width for Postcode Service

Source: https://postcode.map.kakao.com/guide

Set a fixed width for the postcode search popup or layer mode. For layer mode, a percentage can also be used. The width cannot be smaller than minWidth.

```javascript
width: 500
```

--------------------------------

### Set Minimum Width for Postcode Service

Source: https://postcode.map.kakao.com/guide

Specify the minimum width for the postcode search popup or layer mode. The default value is 300px. Only numeric values are accepted, and the unit is automatically set to 'px'.

```javascript
minWidth: 200
```

--------------------------------

### Set Fixed Height for Postcode Service

Source: https://postcode.map.kakao.com/guide

Set a fixed height for the postcode search popup or layer mode. For layer mode, a percentage can also be used. The minimum height is 400px.

```javascript
height: 500
```

--------------------------------

### Iframe Container for Postcode Search

Source: https://postcode.map.kakao.com/guide

This div acts as a container for the postcode search iframe. It is initially hidden and its display and size are managed by JavaScript.

```html
<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative">
<img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
</div>
```

--------------------------------

### Embed Kakao Postcode Finder in Iframe

Source: https://postcode.map.kakao.com/guide

Embeds the Kakao Postcode search interface within an iframe on your page. Requires a target DOM element to be passed as the first argument.

```javascript
new kakao.Postcode({...}).embed(element);
```

--------------------------------

### Open Kakao Postcode Popup with Custom Title

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup with a custom title displayed in the browser's status bar. If not specified, the default title 'Kakao Postcode Service' is used.

```javascript
new kakao.Postcode({...}).open({
  popupTitle: '우편번호 검색 팝업' //팝업창 타이틀 설정 (영문,한글,숫자 모두 가능)
});
```

--------------------------------

### HTML Input Fields for Postcode Search

Source: https://postcode.map.kakao.com/guide

These HTML elements are used to display the postcode, address, detailed address, and extra address information. The '우편번호 찾기' button triggers the postcode search functionality.

```html
<input type="text" id="sample6_postcode" placeholder="우편번호">
```

```html
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
```

```html
<input type="text" id="sample6_address" placeholder="주소"><br>
```

```html
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
```

```html
<input type="text" id="sample6_extraAddress" placeholder="참고항목">
```

--------------------------------

### Open Kakao Postcode Popup without Auto-Close

Source: https://postcode.map.kakao.com/guide

Opens the Kakao Postcode search popup and prevents it from automatically closing after a selection is made. The default behavior is to auto-close (true).

```javascript
new kakao.Postcode({...}).open({
  autoClose: false //기본값 true
});
```

--------------------------------

### HTML Input Fields for Postcode Search

Source: https://postcode.map.kakao.com/guide

These input fields are used to display the postcode, address, detailed address, and extra address information. A button triggers the postcode search function.

```html
<input type="text" id="sample3_postcode" placeholder="우편번호">
```

```html
<input type="button" onclick="sample3_execDaumPostcode()" value="우편번호 찾기"><br>
```

```html
<input type="text" id="sample3_address" placeholder="주소"><br>
```

```html
<input type="text" id="sample3_detailAddress" placeholder="상세주소">
```

```html
<input type="text" id="sample3_extraAddress" placeholder="참고항목">
```

--------------------------------

### Embed Kakao Postcode Finder in Iframe without Auto-Close

Source: https://postcode.map.kakao.com/guide

Embeds the Kakao Postcode search interface in an iframe and prevents the search results layer from disappearing after a selection. For layer-based embeds, ensure related display style adjustments are also removed.

```javascript
new kakao.Postcode({...})..embed(element, {
  autoClose: false //기본값 true
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.