jquery 자동완성(20130510)

[js]
jquery-ui-1.10.2.js
jquery-1.9.1.js
[css]
jquery-ui_1.10.2.css
[javascript]
jQuery(function($){

inputTextAutocomplete();

});

function inputTextAutocomplete(){
    /*
    *1. 자바 action 이경우 ../xxx.action 을 호출 함.
    *      var URL = "../xxxx.action";
    *2. json 형식의 파일이 있을경우 경로를 url 로 설정 함.
    *      var URL = "../xxxx.json";
    */

    $('#inputText).autocomplete({
         source: function (request, response) {
          var param = "&vo.inputtext="+ $('#inputText).val();
          $.ajax({
                 url: URL,
                 dataType: "json",
                 type: 'POST',
                 contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                 data: param,
                 error: function(data){
                
                 },
                 success: function(data) {
                
      $(".ui-autocomplete").css("z-index", "9999");
      $(".ui-autocomplete").css("overflow", "auto");
      response($.map(data, function(item) {
                          return {
                           codevalue: item.codevalue,
                           codeindex: item.codeindex,                                              
                          };
               }));
           }
    });
   },
         minLength:0,/* focus 함수를 사용함으로 인해 minLength 값을 1 로 주어도됨.*/
         autoFocus: false,
         delay: 100,
         focus: function () {
             // prevent value inserted on focus 
             //자동완성 검색 키워를 입력하여 콤보박스 형태로 자동완성되었을때
             //Key Down, Key Up 으로 선택시 입력 Text 박스에 입력한
            //자동완성 키워드가 리셋되는 형상을 방지 하기위해 return false 함.
            //focus: function () 을 사용하지 않거나 사용하되 return true 를 하면
            // 입력 Text 박스에 입력한 자동완성 키워드가 리셋 됨.
             return false;
         },
         select: function(event, ui) {
   
          $('#inputTextHidden).val(ui.item.codeindex);
    
     
        //alert(event.button);
        if (event.keyCode == 13 || event.button == 0){  
          //키보드 이벤트 또는 마우스 이벤트가 발생하면 처리 되는 로직추가
           ...........................  
        }
     
      }
      })
      .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

//inputText인 TEXT 박스에 입력시 드롭다운 콤보 박스 형태로 보여주도록 Html 구성 

          return $( "<li>" )
         .data( "item.autocomplete", item )
         .append( "<a>" + "<strong>"+item.codevalue+"</strong>  "+item.compnm + "</a><span style='cursor: pointer; position:absolute; top:3px; right:4px;' onclick=eventFunction('"+item.codeindex+"')>X</span>" )
         .appendTo( ul );
  };

}
function eventFunction(codeindex){
    alert(codeindex);
}
[html]
<input id="inputText"  type="text"  >
<input id="inputTextHidden"  type="hidden"  >