JSON 을 이용해 자동완성기능을 넣어보자.

기능 출처 및 참고한 사이트는 PHP SCHOOL 쪽에서 많이 가져왔습니다.

(영문검색 정도만 간단하게 다뤄볼생각입니다. 한글 초성 검색은 엄청복잡합니다. 블로그 주인장도 안해봄..)

자동완성 기능이란(?)

- Autocomplete 라고 도 하면서 .

사진 설명을 입력하세요.

이런식으로 키워드 를 넣기만해도 DB 에 있는 값들을 주르륵 표시해주면서 좀더 편하게 검색을 할수 있는기능입니다.

JQUERY 를 사용할것이고.

사용할 라이브러리는 JQUERY UI 입니다.

<!-------- Head 부분에 들어갈 플러그인 인쿨루드 -------->

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

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

<script src="js/jquery-ui.js"></script>

------------------------순서는 맞춰주는것이 좋습니다. --------------------------

html 코드는 딱 하나만 넣습니다.

<input type='text' id='search_input' value=''>

jquery 부분입니다.

$( function() {

function highlightText(text, $node) {

//강조색 넣는 함수. 그냥 잘라내기해서 가져다 쓰시면됩니다. 저도 고친거 없기때문에

var searchText = $.trim(text).toLowerCase(), currentNode = $node.get(0).firstChild, matchIndex, newTextNode, newSpanNode;

while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {

newTextNode = currentNode.splitText(matchIndex);

currentNode = newTextNode.splitText(searchText.length);

newSpanNode = document.createElement("span");

newSpanNode.className = "highlight";

currentNode.parentNode.insertBefore(newSpanNode, currentNode);

newSpanNode.appendChild(newTextNode);

}

}

$("#search_input").autocomplete({ // 자동완성 #search_input 은 선택자... 말안해도 알겠죠...?

source: function( request, response ){

// 소스는 말그대로 ui플러그인이 제공하는 자동완성기능 을 JSON으로 담을것인데 그걸 수동으로 변수 주듯이

// var text = [{"data":"1234"},{"data","ABCD"}];

// source : text, 이런식으로 할것이냐. 아니면 PHP 페이지로 이동해 print_r() 을통해 echo 값으로 가져온 문자열(JSON) 방식 으로 쓸것이냐

// 하는거죠. 여기서는 데이터베이스에서 끌어올것이므로 소스 그대로 사용합니다. 이주석은 삭제해주시길.

$.ajax({ //ajax로 가져옵니다. ajax는 기본입니다! 엄청나게 광범위하게 사용되기도 하니까 꼭 숙지해주세요

type: 'post', //post 방식 get방식도있음

url: "autocomplete_json.php", //url입니다. php 파일을 통해 json을 가져올꺼니까 경로 잘적어주고요..

dataType: "json",

data: {term : request.term},

//data 는 파라미터를 이야기합니다. GET 방식은 naver.com?id=A1234 이런식으로 넘겨줄수있죠.

// 여기서는 POST 방식으로 보내줄껍니다. term : request.term 이라고 되어있는데 .

//일단 request.term은 input 박스에 입력한 키워드값 입니다.

// autocomplete_json.php 에서는 $_REQUEST['term'] 으로 받을수 있겠죠?

// ex) ABC: '1234' 면 echo $_REQUEST['ABC']; //1234가 나옵니다. PHP 에서는.

success : function(data){

//PHP 파일에서 오류없이 성공적으로 JSON이 나왔다면 data 에 JSON 문자열이 담겨져 data 변수에 담아지게 됩니다.

// 여기있는 data 라는 변수는 정하기 나름 ... 위에있는 속성 data랑은 다른겁니다.

//console.log(data);

response(

$.map(data, function(item) { // JSON은 오브젝트 형태(배열)이기때문에. map을 사용합니다.

return { label: item.name } //JSON 에 있는 key 값을 여기다써줍시다. [{"과자":"바나나킥"}] 이라면 item 과자가 되겠죠.

})//map

)//response

}//success

});//ajax

},//source

minLength: 2, // input에 최소 입력해야하는 문자 개수

select: function( event, ui ) {

// 만약 검색리스트에서 선택하였을때 선택한 데이터에 의한 이벤트발생

}

}).data("ui-autocomplete")._renderItem = function(ul, item) {

//하일라이트를 사용하기위한 _renderItem 잘모르면 그냥쓰죠! 저도이부분은 잘몰라요.

var $a = $("<a></a>").text(item.label);

highlightText(this.term, $a);

return $("<li></li>").append($a).appendTo(ul);

};

    });

위는 실제 실무에서 사용한 코드입니다.

몇개 지우기는 했지만 저상태에서 autocomplete_json.php 만 잘 쿼리 가져와서 foreach로 돌려서

json을 만들어준다면 정상적으로 작동합니다.

궁금한점있으면 댓글부탁드립니다~