우편번호 자동완성 prototype + scriptAculous

* 주의사항
!DOCTYPE 선언하면 Autocompleter 입력시 바로 작동하지 않음.

CSS Code

/* 주소 검색상자 */
#mb_addr { ime-mode: active; }

/* 주소 자동완성 */
div.autocomplete {
  position:absolute;
  background-color:white;
  border:1px solid #888;
  margin:0px;
  padding:0px;
}
div.autocomplete ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb; }
div.autocomplete ul li {
  list-style-type: none;
  display:block;
  margin:0;
  padding:2px;
  height:30px;
  font: 9pt sans-serif;
  border-bottom: 1px dashed silver;
}
div.autocomplete ul li div.infomal {
  font: bold 9pt dotum;
}

#addr_search_busy { color:red; font-weight:bold; }

#addr_autocomplete ul li { width:350px; }

HTML Code

 
     
     

     
     



주소
 -      동 이름으로 검색  (예: 효자동) 

 Working... 나머지 주소  




 

 
 

 

zipcode_autocompleter.js

- Autocompleter.Local 변형

Autocompleter.zipCode = Class.create(Autocompleter.Base, {
    initialize: function(element, update, array, options) {
        this.baseInitialize(element, update, options);
        this.options.array = array;
    },
 getUpdatedChoices: function() {
        this.updateChoices(this.options.selector(this));
    },
 setOptions: function(options) {
        this.options = Object.extend({
            choices: 10,
            partialSearch: true,
            partialChars: 2,
            ignoreCase: true,
            fullSearch: false,
            selector: function(instance) {
                var ret = [];
                // Beginning matches
                var partial = [];
                // Inside matches
                var entry = instance.getToken(); // 입력한 내용
                var count = 0;

                for (var i = 0; i < instance.options.array.length &&
                ret.length < instance.options.choices; i++) {

                    var elem = instance.options.array[i];
     var s_field = (instance.options.search_field)? instance.options.search_field : "addr";
                    var elem_search = elem[s_field];
                    var foundPos = instance.options.ignoreCase ?
                    elem_search.toLowerCase().indexOf(entry.toLowerCase()) :
                    elem_search.indexOf(entry);

                    while (foundPos != -1) {
                        if (foundPos == 0 && elem_search.length != entry.length) {
                            var value = "" + elem_search.substr(0, entry.length) + "" + elem_search.substr(entry.length);
                            ret.push(
                            "
" + "
" + value + "
"
                            + "
" + elem.zip1 +"-"+ elem.zip2 + "
" + ""
                            );
                            break;

                        } else if (entry.length >= instance.options.partialChars && instance.options.partialSearch && foundPos != -1) {
                            if (instance.options.fullSearch || /\s/.test(elem_search.substr(foundPos - 1, 1))) {
                                var value = elem_search.substr(0, foundPos) + "" +
                                elem_search.substr(foundPos, entry.length) + "" + elem_search.substr(
                                foundPos + entry.length)

                                partial.push(
                                "
" + "
" + value + "
"
                                + "
" + elem.zip1 +"-"+ elem.zip2 + "
" + ""
                                );
                                break;
                            }
                        }
                        foundPos = instance.options.ignoreCase ?
                        elem_search.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
                        elem_search.indexOf(entry, foundPos + 1);
                    }
                }
                if (partial.length) ret = ret.concat(partial.slice(0, instance.options.choices - ret.length));
                return "
" + ret.join('') + "
";
            }
        },
        options || {});
    }
});

 

zipcode.js

- 우편번호 JSON 배열 형식 DB
- 너무 길어서 부분만...

var zipcode = [
{zip1:"100",zip2:"011",sido:"서울",sigu:"중구",dm:"충무로1가",ri:"",addr:"서울 중구 충무로1가"},
{zip1:"100",zip2:"012",sido:"서울",sigu:"중구",dm:"충무로2가",ri:"",addr:"서울 중구 충무로2가"},
......
];

우편번호 JSON 배열 형식 DB 만드는법

1. http://www.epost114.co.kr/service/download.htm 에서 우편번호DB 다운로드.
2. *_우편번호(기존형태).xls 엑셀로 열기.
3. 일련번호,도서,번지,변경일 필드 제거.
4. A3~끝 선택. (Ctrl + Shift + End)
5. 메뉴 > 데이터 > 정렬.
6. 1~2열(메뉴열) 전체 제거.
7. 메뉴 > 파일 > 다른이름으로 저장 > CSV 형식으로 저장 > 파일명 "zipcode.csv"
8. 아래 첨부한 vbs 스크립트를 다운로드하고 압축 해제 및 실행.

zipcode2x.7z

9. Win + R > cmd > 엔터.
10. 명령줄에서 "Cscript /nologo zipcode2x.vbs /h" 실행 하여 사용법 보고 변환 실행.
11. vbs 실행한 디렉토리에 zipcode.js 생성됨.