티스토리 뷰

* 주의사항
!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

 
     
     

     
     

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

 

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 스크립트를 다운로드하고 압축 해제 및 실행.


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

    댓글
    댓글쓰기 폼
    Total
    818,296
    Today
    119
    Yesterday
    305
    «   2020/02   »
                1
    2 3 4 5 6 7 8
    9 10 11 12 13 14 15
    16 17 18 19 20 21 22
    23 24 25 26 27 28 29
    글 보관함