=========================================================================

        <tr align=center bgcolor=white height=25>
            <td width=15% bgcolor='$_1_bgcolor'>차량정보</td>
            <td align='left' width=*>&nbsp;<input type='text' id='car_name' name='car_name'></td>
        </tr>

<!-- 차량정보 div -->
<script>
 function fnChangeLayerSize(obj, _t, _v) {
  if(_t=='W') obj.style.width = _v;
  if(_t=='H') obj.style.top = _v;
 }

 function fnSetCarSetting(car_maker_code, car_info_code) {
  var f = document.addform;
  f.car_maker_code.value = car_maker_code;
  f.car_info_code.value  = car_info_code;

  alert(f.car_info_code.value + ', ' + f.car_maker_code.value);
 }

 <? $framesrc = "/kboard/lib/get_sugest_info.php?qname=car_name&sname=sugdiv&surl=/kboard/board/proc/get_car_sugest.php"; ?>
 document.write("<div id='sugdiv' style='position:absolute;top:470px;left:493px;display:none'>");
 document.write("<iframe name='hdframe' src='<?=$framesrc?>' style='background-color:red;width:300px;height:150px;border:solid 1 black' frameborder=0></iframe>");
 document.write("</div>");

 var obj_sugdiv = document.getElementById('sugdiv');
</script>
<!-- 차량정보 div end -->

==============================================================================

-------------- get_sugest_info.php ------------

<link rel='stylesheet' href='/kboard/style.css'>
<script language='javascript' src='/kboard/js/prototype.js'></script>
<script language='javascript' src='/kboard/js/ajax.js'></script>
<script>
var req;
var userKeyword = "";
var oldUserKeyword = "";
var useSuggestFunction = true;
var totalKeywordCount = 0;
var curCursorPos = -1;
var guideDisplayFlag = true;
var buildListComplete = true;
var virtualValue = "";
var oldValue = "";
var QLIST_COUNT  = 5;
var isFirstBuild = false;
var service = "ktop";
var onMouseOverColor = '#e0e8f5';
var onMouseOutColor  = '#ffffff';
var qObj = getObject("<?=$qname?>","parent");
var sObj = getObject("<?=$sname?>","parent");

qObj.onkeydown = eventHandler;

 function eventHandler(e) {
  if("undefined"==typeof(e)) evt = parent.window.event;
  else evt = e;
  setFrameEvent(evt);
 }

 function isAvailableKeyCode(key) {
  /* 37~40(방향키) 112~123(F1~F12) 18(Alt) 17(Ctrl) 116(F5) (27)esc */
  var keyArr = new Array(17,18,37,39,116);
  for(var i=0; i<keyArr.length; i++) if(keyArr[i]==key) return false;
  return true;
 }

 function checkLayerDisplay(obj) {
  if(getObject(obj,"").style.display=='block') return true;
  else return false;
 }

 function moveFocusToSelect(key) {
  clearCursorPos();
  if(key==38) {
   if(curCursorPos==-1 || curCursorPos==0) {
    setQueryDisplayOff();
    qObj.value = userKeyword;
    return;
   } else {
    curCursorPos = curCursorPos - 1;
    if((curCursorPos+QLIST_COUNT) < totalKeywordCount) {
     getObject("querylist","").doScroll("scrollbarUp");
     getObject("querylist","").doScroll("scrollbarUp");
    }
   }
  } else if(key==40) {
   if(curCursorPos!=(totalKeywordCount-1)) {
    onMouseOutKeyword(curCursorPos);
    curCursorPos = curCursorPos + 1;
    if(curCursorPos > (QLIST_COUNT-1)) {
     getObject("querylist","").doScroll("scrollbarDown");
     getObject("querylist","").doScroll("scrollbarDown");
    }
   }
  } else if(key==13) {
   if(curCursorPos!=(totalKeywordCount-1)) {
    onMouseOutKeyword(curCursorPos);
    if(curCursorPos == -1) curCursorPos = curCursorPos + 1;

    onClickKeyword(curCursorPos);
   }
  }
  setTimeout("setCursorPos()",10);
 }

 function setCursorPos(num) {
  if(!buildListComplete) setTimeout("setCursorPos()",10); // 이벤트가 두번발생되는 경우
  if(checkLayerDisplay("querylist_border")) {
   var pos = curCursorPos;
   if(num==0) pos = 0;
   if(getObject("f"+pos,"")) {
    qObj.value = getObject("f"+pos,"").innerText;
    getObject("f"+pos,"").style.backgroundColor=onMouseOverColor;
    virtualValue = qObj.value;
   }
   return;
  }
 }

 function setFrameEvent(evt) {
  if (evt && useSuggestFunction) {
   var key = evt.keyCode;
   if(!isAvailableKeyCode(key)) return;
   else {
    if(key==27) setQueryDisplayOff();
    else if(key==38) moveFocusToSelect(key); // ↑
    else if(key==40) { // ↓
     if(qObj.value != '') {
      if(!checkLayerDisplay("querylist_border")) setQueryDisplayOn();
      else setTimeout("moveFocusToSelect(40)", 10);
     }
    } else if(key==13) {
     setTimeout("moveFocusToSelect(13)", 10);
    } else {
     setTimeout("setQueryValue()",10);
    }
   } // end else
  } // end if
 } // end setFrameEvent...

 function getObject(objectId,nodeObject) { // 객체 얻기 : checkW3C DOM, then MSIE 4, then NN 4.
  var doc = document;
  if(nodeObject!="") doc = eval(nodeObject + ".document");
  if(doc.getElementById && doc.getElementById(objectId)) return doc.getElementById(objectId); // 대부분의 브라우저
  else if (doc.all && doc.all(objectId)) return doc.all(objectId); // IE4와 5.0
  else if (doc.layers && doc.layers[objectId]) return doc.layers[objectId];  // Netscape 4.x
  else return false;
 }

 function checkChangeValue() {
  var newValue = qObj.value;
  
  var q = qObj.value;
  if(newValue=="") {
   oldValue = "";
   oldUserKeyword = "";
//   if(guideDisplayFlag) setQueryDisplayOff();
  }
  if(newValue!=oldValue && newValue!=virtualValue) setQueryValue();
  setTimeout("checkChangeValue()",100);
 }

 function setQueryValue() {
  var q = qObj.value;
  if(q == " ") return;

  if(q==oldUserKeyword) return;
  if(q.length < 20) {
   loadXMLDoc(q); // execute query...
   userKeyword = q;
   oldUserKeyword = q;
   oldValue = q;
  }
 }

 var _q;
 function loadXMLDoc(_str) {
  var str = checkStr(_str);
  var url = SUG_URL +"?q="+ str;
  _q = str;
  if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
   try {
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send(null);
   } catch (e) {
    //alert(e);
   }
  } else if (window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
   if (req) {
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send();
   }
  }
 }

 function checkStr(str) {
  var ch;
  var returnStr = "";
  for (var i=0; i<str.length; i++) {
   ch = str.charAt(i);
   if(ch==" ") returnStr += "%20";
   else returnStr +=ch;
  }

  return returnStr;
 }

 function processReqChange(req) {
  try {
   clearQueryList();
   buildQueryList();
  } catch(ex) {
   return;
  }
 }

 function setQueryDisplayOff() {
  getObject("querylist_border","").style.display = "none";
  getObject("hdframe","parent").style.display = "none";
  sObj.style.display = "block";
  curCursorPos = -1;
 }

 function onClickKeyword(curCursorPos) {
  qObj.value = getObject("f"+curCursorPos,"").innerText;
  
  var value1 = getObject("m"+curCursorPos,"").value;
  var value2 = getObject("c"+curCursorPos,"").value;

  parent.fnSetCarSetting(value1, value2);
  setQueryDisplayOff();
  clearQueryList();
 }

 function onMouseOverKeyword(curSorNum){
  clearCursorPos();
  curCursorPos = curSorNum;
  getObject("f"+curSorNum,"").style.backgroundColor = onMouseOverColor;
 }

 function onMouseOutKeyword(curSorNum){
  curCursorPos = curSorNum;
  if(getObject("f"+curCursorPos,"")) getObject("f"+curCursorPos,"").style.backgroundColor = onMouseOutColor;
 }

 function onMouseDownKeyword(curCursorPos) {
  getObject("f"+curCursorPos,"").style.cursor = 'hand';
 }

 function clearQueryList() {
  var q_list = getObject("querylist","");
  q_list.innerHTML = "";
 }

 function clearCursorPos() {
  try {
   for(var i=0; i<totalKeywordCount; i++) getObject("f"+i,"").style.backgroundColor=onMouseOutColor; 
  } catch (ex) {
   return;
  }
 }
 
 var car_maker_code;
 var car_info_code;
 function buildQueryList() {
  var q_list = getObject("querylist","");
  var reqvalue = req.responseText;
  var value = reqvalue.split('<br>');
  var str = "";
  
  var forlength = value.length -1;
  for(var i=0; i<forlength; i++) {
   totalKeywordCount = value[i].length;
   if(totalKeywordCount < 1) {
    //setQueryDisplayOff();
    return;
   } else {
    valuespl = value[i].split("^");
    highlightVal = highlightCheck(valuespl[valuespl.length-1]);
    str += "<div style='width:100%;padding:4px 0 0 6px;height:18px;cursor:default' id='f"+i+"' onclick='onClickKeyword("+i+")' onmouseover='onMouseOverKeyword("+i+")' onmouseout='onMouseOutKeyword("+i+")' onMouseDown='onMouseDownKeyword("+i+")'>" + highlightVal + "</div>";
    str += "<input type='hidden' name='m"+i+"' value='"+valuespl[0]+"'>";
    str += "<input type='hidden' name='c"+i+"' value='"+valuespl[1]+"'>";
    if(!isFirstBuild) setQueryDisplayOn(); // 최초 검색시에는 화면 보여주지 않는다.
    isFirstBuild = false;
   }
  }

  q_list.innerHTML = str;
  sObj.style.display = 'block';
  getObject("guidelist","").style.display = 'none';
  curCursorPos = -1;
  buildListComplete = true;
  if(service=="ktop" && totalKeywordCount > 0) {
   for(var i=0;i<2;i++) { // scroll 초기화
    var obj = getObject("querylist","");
    obj.doScroll("pageUp");
   }
  }
 }

 function setResizeLayer() {
  var DaumTopMax = QLIST_COUNT;
  var itemHeight = 18;
  var footerHeight = 31;
  var q_list = getObject("querylist","");
  if(totalKeywordCount > (QLIST_COUNT)) {  
   q_list.style.height = itemHeight * DaumTopMax; 
   getObject("hdframe","parent").style.height = itemHeight * DaumTopMax + footerHeight;
  } else {
   q_list.style.height = itemHeight*totalKeywordCount
   getObject("hdframe","parent").style.height = itemHeight*totalKeywordCount + footerHeight;
  }
 }

 function setQueryDisplayOn() {
  if(totalKeywordCount > 0) {
   setResizeLayer();
   getObject("querylist_border","").style.display = "block";
   getObject("hdframe","parent").style.display = "block";
  }
 }

 function fnChkKor( koreanChar ) {
  if(koreanChar == null) return false;
  for(var i=0;i<koreanChar.length;i++) {
   var c=koreanChar.charCodeAt(i);
   //( 0xAC00 <= c && c <= 0xD7A3 ) 초중종성이 모인 한글자
   //( 0x3131 <= c && c <= 0x318E ) 자음 모음

   if( !(
        ( 0xAC00 <= c && c <= 0xD7A3 )
     || ( 0x3131 <= c && c <= 0x318E )
      )
      ) {     
    return false ;
   } // end if
  } // end for
  return true ;
 }

 function highlightCheck(str) {
  var rtStr = str;
  var _startIndex = str.indexOf(_q);

  if(!fnChkKor(_q)) _startIndex = parseInt(_startIndex,10) + parseInt(1,10);
  var _str = str.substring(_startIndex,_q.length).toLowerCase();
  if(_str==_q.toLowerCase())
   rtStr = "<font color='EB550C'>" + str.substring(_startIndex,_q.length) + "</font>" + str.substring(_q.length,str.length);
  return rtStr;
 }

 function init() {
  checkChangeValue();
 }

 var SUG_URL = '<?=$surl?>';
 init();
</script>

<body style="margin:0;padding:0" onload="init()">
<div id="QL">
<div id="querylist_border"><div id="querylist"></div></div>
<div id="guidelist"></div>
</div>
<div id="footer"></div>
</body>

-------------- get_sugest_info.php ------------

서버 접속 파일

<?
 include $DOCUMENT_ROOT."/kboard/lib/head.php";

 $today = time();
 $date = date('Ymd');
 set_time_limit(0);

 if (!function_exists('convert_charset')) {
  /*
  -----------------------------------------------------------
   Charset 을 변환하는 함수
  -----------------------------------------------------------
  iconv 함수가 있으면 iconv 로 변환하고
  없으면 mb_convert_encoding 함수를 사용한다.
  둘다 없으면 사용할 수 없다.
  */
  function convert_charset($from_charset, $to_charset, $str) {

   if( function_exists('iconv') )
    return iconv($from_charset, $to_charset, $str);
   elseif( function_exists('mb_convert_encoding') )
    return mb_convert_encoding($str, $to_charset, $from_charset);
   else
    die("Not found 'iconv' or 'mbstring' library in server.");
  }
 }

// $q = convert_charset('UTF-8','CP949',$q);
 if(!$q) exit;
 $q = str_replace(' ', '', $q);
 $org_q = $q;
 $q = '%'.$q.'%';
 
/*

 $sql = "select no, binary(str) str
    , case when substring(str, 1, 1) = '$org_q' then 1 else 2 end ss
    , case when (     substring(str, 1, 1) = '$org_q'
           and LENGTH(binary(trim(str)))
          = 2 ) then 1 else 2 end se
   from bbs_sugest where (str like '$q' or f like '$q')
   order by ss, se
   LIMIT 0, 100";
*/

cjj = 한글의 초성,중성,종성을 검색...

jaso_split( $str )을 이용하여 db에 입력시 한글을 분리하여 입력

예..) 현대자동차 => 혀ㄴㄷㅐ ㅈ ㅏ ㄷ ㅗ ㅇ ㅊ ㅏ                   

    $sql = "select b.car_maker_code, b.car_info_code, concat(a.car_maker_name, ' ', b.car_name, ' ', b.car_opt1) str
   from car_maker a
     , car_info b
   where a.car_maker_code = b.car_maker_code
   and   (lower(replace(concat(a.car_maker_name,b.car_name), ' ', '')) like lower('$q') or cjj like lower('$q'))
   order by replace(concat(a.car_maker_name,b.car_name), ' ', '') asc
   limit 0, 100";

 $result = mysql_query($sql);
 $selstr = convert_charset('CP949', 'UTF-8', "선택");

 $out2 = "";
 while($row = mysql_fetch_object($result)) {
  $str = $row->car_maker_code."^".$row->car_info_code."^".$row->str;

  $out = convert_charset('CP949', 'UTF-8', $str);

  $out2 .= $out."<br>";
 }

 echo $out2;
?>

출처 : Daum sugest 참고 및 본인