jquery 자동 완성

jquery  를 이용한 자동완성 구현...  자주 써먹어서 정리처리

일단 관련 js와 css 는 

http://jqueryui.com/  여기서 다운로드 하면 되고.. 아래처럼... 상단에 다닥 붙여준다 

1. 

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="/css/layout.css" />

2. 검색 페이지를 꾸며 준다. 

 <input type="text" id="tags" name="key" class="input" value="<%=key%>" />&nbsp;<img src="/images/search_btn.gif" alt="" style="cursor:pointer;" onclick="checkTopS()" />

<img src="/images/contents/btn_see.gif" alt="" style="padding-bottom:2px"  style="cursor:pointer;vertical-align:middle; " onclick="checkTopY()"/>

 아래는 자동 완성 부분 뿌려줄 div 

<div class="ui-widget"  style="text-align:left;">

<label for="tags" size="50" ></label>

</div>

3. javascript 검색 소스 부분..  

json 으로 받아 오는데. . 변수 넘기는 파라미터 이름이 term 이다..... 알아내느라 애먹음.. ㅡ,.ㅡ 

autoCompleteData.asp?term=검색어 .. .이런헝식으로 넘어간다. 

// 검색 관련 

 $(function() {

  

    $( "#tags" ).autocomplete({

      source: "/common/json/autoCompleteData.asp",

      select: function( event, data ) {

 location.href="/common/news/listbody.asp?po_no="+ data.item.id

        //log( ui.item ?

      //    "Selected: " + ui.item.value + " aka " + ui.item.id :

      //    "Nothing selected, input was " + this.value );

      }

    });

  });

4. 서버단..  json 형태로 넘겨온 변수로 뿌려줄 값을 넘겨주면 되는데

인코딩이 문제가 된다.   

호출 페이지가 다른  케릭터 셋을 요구 할 수도 있는데 

무시하고  서버 단은 다 UTF-8 형태로 캐릭터 셋, 서버셋을 맞춰 줘야 한다..... 

요거땜시 한참 해맨 관계로 ...적어 놓는다... 

asp 같은 경우는.. 

<% @CODEPAGE="65001" language="VBScript" %>  최 상단에 이렇게 저고..

파일 인코딩도 UT-8 로 맞춰줘서 해결

session.codepage 를 쓰면 아주 더티 해진다.....  절때 절때 쓰지 말것도 .....