자동완성

/*
 * Create by nhosw at i-swear.com
 *         Last Modify 2007.09.30
 * 이 주석은 삭제하지마시길 바랍니다.
 */

  document.write('<style type="text/css">#ob { border: #333333 1px solid; padding: 0px; background: #FFFBEE; position: absolute; display: none; overflow-Y: auto; }  #ob div { padding: 2px; cursor:pointer; font-size: 12px; }  #ob div.ajax_hover { background: #FFDCB8; }  #ob div span { font-size: 12px; color:#333333; }  #ob div span.match { color: #FF0000; }  #ob div span.unmatch { color: #333333; }</style>');
  var a_new = null;
  var a_old = null;
  var a_timer = null;
  var a_obj = null;
  var a_int = 300;
  var a_type = null;
  var a_search = null;
  var B="block",I="inline",N="none",UD="undefined";
  var UD = "undefine";
  var han_1 =new Array('ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ');//초성 19개
  var han_2 =new Array('ㅏ','ㅐ','ㅑ','ㅒ','ㅓ','ㅔ','ㅕ','ㅖ','ㅗ','ㅘ','ㅙ','ㅚ','ㅛ','ㅜ','ㅝ','ㅞ','ㅟ','ㅠ','ㅡ','ㅢ','ㅣ');//중성 21개
  var han_3 =new Array('','ㄱ','ㄲ','ㄳ','ㄴ','ㄵ','ㄶ','ㄷ','ㄹ','ㄺ','ㄻ','ㄼ','ㄽ','ㄾ','ㄿ','ㅀ','ㅁ ','ㅂ','ㅄ','ㅅ','ㅆ','ㅇ','ㅈ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ');//종성 28개

  // $ 이 존재하는지 확인.
  if (typeof($) != "function") { function $(id) { return document.getElementById(id); } }
  // _isIE 가 존재하는지 체크
  if (typeof(_isIE) != "boolean") var _isIE=(navigator.userAgent.match(/Gecko/))?false:true;
  if (!$('ob')) { document.write('<div id="ob"></div>'); }
  // lX 가 존재하는지 체크
  if (typeof(lX) != "function") {
        function lX(obj, top, absolute) {
        var x = 0;
        if (!obj) return 0;
        if (_isIE) {
            do {
                if (absolute && obj && obj.style && obj.style.position == 'absolute') break;
                x += obj.offsetLeft+obj.clientLeft-obj.scrollLeft;
                obj = obj.offsetParent;
            }
            while (obj && obj != top);
        }else{
            do {
                if (absolute && obj && obj.style && obj.style.position == 'absolute') break;
                x += obj.offsetLeft-obj.scrollLeft;
                obj = obj.offsetParent;
            }
            while (obj && obj != top);
        }
        if (obj == document.body || !top) x-=document.body.offsetLeft;
        return x;
    }
  }
  // lY 가 존재하는지 체크
  if (typeof(lY) != "function") {
    function lY(obj, top, absolute) {
        var y = 0;
        if (!obj) return 0;
        if (_isIE) {
            do {
                if (absolute && obj && obj.style && obj.style.position == 'absolute') break;
                y += obj.offsetTop+obj.clientTop-obj.scrollTop;
                obj = obj.offsetParent;
            }while (obj && obj != top);
        }else{
            do {
                if (absolute && obj && obj.style && obj.style.position == 'absolute') break;
                y += obj.offsetTop-obj.scrollTop;
                obj = obj.offsetParent;
            }while (obj && obj != top);
        }
        if (obj == document.body || !top) y-=document.body.offsetTop;
        return y;
    }
  }

  function setBox(el, el_type, el_method, event) {
    if (_isIE) var e = window.event;
    else var e = event;
    if (a_obj == el) {
        if (e.keyCode == '40') {    // 아래 화살표
            if ($("ob").style.display == B || $("ob").style.display == "") {
                var cnt = $("ob").childNodes.length;
                for (var i=0; i<cnt; i++) {
                    if ($("ob").childNodes[i].className == "ajax_hover") {
                        if (i < cnt - 1) $("ob").childNodes[i+1].className = "ajax_hover";
                        if (i < cnt - 1) $("ob").childNodes[i].className = "";
                        return;
                    }
                }
                $("ob").firstChild.className = "ajax_hover";
            }
            e.returnValue=false;
        }
        else if (e.keyCode == '38') { // 위로 화살표
            if ($("ob").style.display == B || $("ob").style.display == "") {
                var cnt = $("ob").childNodes.length;
                for (var i=cnt-1; i>=0; i--) {
                    if ($("ob").childNodes[i].className == "ajax_hover" && i > 0) { $("ob").childNodes[i].className = ""; $("ob").childNodes[i-1].className = "ajax_hover"; return false; }
                }
                $("ob").firstChild.className = "ajax_hover";
            }
            e.returnValue=false;
        }
        else if (e.keyCode == '13') { // 엔터
            m_in(el);
            e.returnValue=false;
        }
        if (a_timer == null) { return; }
    }
   
    el.setAttribute("autocomplete", "off");    // 브라우저 자동완성 끄기.

    a_timer = null;
    a_obj = el;
    a_type = el_type;
    $("ob").style.top = lY(el) - 30;
    $("ob").style.left = lX(el) - 5;

    if (a_type == 'array') {
        try {
        if (typeof(el_method) == 'string') a_search = eval(el_method);
        else a_search = el_method;
        }
        catch (e) {
            window.alert("자동완성을 사용할 수 없습니다.");
            el.onkeydown = null;
            return;
        }
        textMatch();
    }
  }
  function setBoxDeclare() {
    if (a_timer != null) {
    window.clearTimeout(a_timer);
    a_timer = null;
    a_new = a_obj.value;
    a_old = a_new;
    a_obj = null;
    }
    $("ob").style.display = N;
  }
  function m_in(el) {
    if (!el) el = a_obj;
    if ($("ob").style.display == B || $("ob").style.display == "") {
        var cnt = $("ob").childNodes.length;
        for (var i=0; i<cnt; i++) {
            if ($("ob").childNodes[i].className == "ajax_hover") { el.focus(); el.value = $("ob").childNodes[i].getAttribute("text", 1);  }
        }
    setBoxDeclare();
    }             
  }
  function m_on(el) {
      var el_p = el.parentNode;
      var cnt = el_p.childNodes.length;
      for (var i = 0; i<cnt; i++) { el.className = "ajax_hover"; if (el_p.childNodes[i] == el) continue; if (el_p.childNodes[i].className == 'ajax_hover') el_p.childNodes[i].className = "";  }
  }
  function textMatch() {
    var ma = null, un_ma = null;
    var str = "";
    if (a_obj != null) a_new = a_obj.value;
    var a_new_len = a_new.length;
    var jamo = false;
    var s = "";
   
    if (a_new == "") $("ob").style.display = N;
    if (a_new != a_old) {
        a_old = a_new;
        for (var i=0; i<a_search.length; i++) {
            ma = ""; un_ma = "";
            if (a_search[i].substring(0, a_new_len) == a_new) { ma = a_new; un_ma = a_search[i].substring(a_new_len); }
            if (ma != "") {
                str += '<div text="' + ma + un_ma + '" onmouseover="m_on(this);" onclick="m_in();"><span class="match">' + ma + '</span><span class="unmatch">' + un_ma + '</span></div>';
            }
        }
        // 루프를 돌았는데도 결과값이 없다면..
        if (str == "" && a_new.match(/[^0-9a-zA-Z_\.\/]$/)) {
            if (a_new.match(/.[ㄱ-ㅎ]$/)) {
                a_new_len--;
                a_new = a_new.substring(0, a_new_len);
            }
            else if (a_new.match(/[a-z0-9A-Zㄱ-ㅎ]$/)) {
//                a_new = a_new.substring(a_new_len - 1);
                jamo = true;
                var tmp = getJamoCodes(a_new.substring(a_new_len - 1));
                a_new = a_new.substring(0, a_new_len - 1) + han_1[tmp[0]-1];
            }
            for (var i=0; i<a_search.length; i++) {
                ma = ""; un_ma = "";
                if (jamo == false) { s = a_search[i].substring(0, a_new_len); }
                else { tmp = getJamoCodes(a_search[i].substring(a_new_len - 1, a_new_len)); s = a_search[i].substring(0, a_new_len - 1) + han_1[tmp[0]-1]; }
                if (s == a_new) {
                    str += '<div text="' + a_search[i] + '" onmouseover="m_on(this);" onclick="m_in();"><span class="unmatch">' + a_search[i] + '</span></div>';
                }
            }
        }
        if (str != "") {
        $("ob").style.width = "";
        $("ob").style.height = "";
        if ($("ob").style.display == "" || $("ob").style.display == N) $("ob").style.display = B;
        if ($("ob").offsetWidth < 150) $("ob").style.width = "150px";
        if ($("ob").offsetHeight > 100) $("ob").style.height = "100px";
        $("ob").innerHTML = str;
        }
    }

    a_timer = window.setTimeout("textMatch()", a_int);
  }

  // 초,중,종성으로 한글을 잘라줌. 한글이 아닐 경우는 배열로 (0,0,0) 리턴 Created By PHPSCHOOL alee
  function getJamoCodes(t) {
    var c = t.charCodeAt(0), c = c<0x3130?0:c<0x3164?c-0x3130:c<0xac00?0:c<0xd7a5?c+68:0;
    if (c>51) return Array((c-c%588)/588-74,((c-c%28)/28)%21+1,c%28);
    return Array(c<3?c:c<4?0:c<5?c-1:c<7?0:c<10?c-3:c<17?0:c<20?c-10:c<21?0:c<31?c-11:0,c<31?0:c-30,0);
  }

이 글은 스프링노트에서 작성되었습니다.

.