네이버나 포탈사이트 등을 방문 하다보면 위와같이

앞글자 혹은 중간글자만 쳐도 나머지 글자들이 나오는 화면을 볼수있는데

이를 자동완성기능 혹은 autocomplete 라고 한다..

기본적으로 브라우저내에서 자동완성기능을 지원하긴 하지만

DB와 연동해서 뿌려주는 기능은 별도 제작을 해야한다.

캐릭터셋이 utf-8 이냐 euc kr 이냐에 따라서도 사용방법이 약간은 다르다.

아래는 간단한 예제와 샘플파일이다.


위 파일은 autocomplete 기능을 사용하게 해주는 plug in 이며

jquery.com 의 plugins 에서도 다운이 가능하다.

우선 jquery 스크립트를 넣어준 뒤 위 플러그인을 삽입해주면 된다.

<?include "data_js.php";?>

<SCRIPT type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./autocomplete/jquery.autocomplete.css"/>
<script type="text/javascript" src="./autocomplete/jquery.autocomplete.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $("#search").autocomplete(goods,{
  matchContains: true
 });
});
</script>

<input type="text" id="search" autocomplete="off">

* 상세소스는 http://jaweb.co.kr/jstudy/18.php 접속후 소스보기하면 다 나오는데
위의 소스만으로도 구동에는 전혀 문제가 없다.


위 내용은 search 라는 id 필드는 autocomplete 기능을 사용할 것이고

데이터는 goods 데이터를 기반으로 내용중 일부라도 맞는경우 (matchContains: true)

보여지게 하겠다는 속성이다.

데이터(goods)를 가져올때는 여러가지 방법이 있는데

난 DB에서 데이터 이용방법과 js 파일 생성방식 두가지로 선택했다.


data_js.php 파일은  단순하게 파일내에 입력을 하게되면 알아서 적용된다. (내용이 간단하니 파일을 참고하면 좋다.)


data_db.php 파일은 db셋팅이 되어있는 파일내에서 어느부분인지를 선택 한 뒤 작업을 해주면 된다.

헌데 소스내용을 보면 굳이 urlencode 를 해서 array_push로 배열안에 값을 넣고

실제 뿌려줄때는 urldecode 를 해서 json 방식으로 다시 인코딩 한 뒤 값을 뿌려준다.

urlencode 의 사용목적은 바로 한글문제..

utf-8 환경에선 urlencode 없이도 무리없이 정상작동 하지만

euckr 환경에선 글씨가 깨져서 들어가거나

null값으로 출력이되어 오류가 나게 된다.


그럴때 json으로 인코딩을 하기 전 urlencode 로 한번 인코딩을 해주고

실제 뿌려줄때 decode를 안하게되면 %45%D 이런식으로 문자가 깨져서 보이기에

글씨 깨짐을 방지하기 위해서 위와같이 작업을 한것이다.


autocomplete 플러그인 내에서는 지원하는 기능이 내가 설명한 정도보다는 훨씬 많다.

줄에 맞춰서 값을 가져오거나

key값에 따라 값을 뿌려주는 기능...

이미지를 이용 출력해는 기능 등~   (참고 : http://jaweb.nayana.com/search.php   우측상단 펫 검색란에 1,2 등을 치거나 펫 이름을 치면 결과가 나오는데.. jquery 처음 배울때 작업한 것이라 소스가 상당히 조잡한 편이다.)

쓸데가 상당히 많아보이는 플러그인이니 공부할때 참고하면 좋을 것 같다.



신고

댓글을 달아 주세요

  1. 2010.07.30 11:28 신고 musicbar  댓글주소  수정/삭제  댓글쓰기

    자세한 정리글 잘 읽었습니다.
    오늘 검색어자동완성 기능을 개발해야 했는데, 보다 쉽게 접근할 수 있을거 같습니다.

  2. 2012.08.29 19:28 신고 BlogIcon 뽀국  댓글주소  수정/삭제  댓글쓰기

    설명이 정말 자세하네요. 예제도 완전 좋고요!
    제발 한 방에 됐으면 좋겠습니다. ^^...
    항상 다른사람 한걸 보고 하는제가 조금 부끄럽네요.
    도전~~ ^^.

 «이전 1 ··· 128 129 130 131 132 133 134 135 136 ··· 218  다음»

티스토리 툴바