[Search Auto Complete] Ajax, XMLHttpRequest 를 사용하여 검색 자동완성 구현하기

 


#. Introduction


자바스크립트, 정확히는 제이쿼리의 Ajax 를 사용해서, 검색어 자동완성을 구현해보도록 하겠습니다. 자동완성을 구현하는 방법은 여러가지가 있는데, HTTP Request 를 이용해서 작성하며, 요청(클라이언트)응답(서버)이 기본입니다. 네이버나 구글, 다음 등 대표적인 포털사이트는 모두 검색어 자동완성 기능을 사용하고 있습니다.




#. Description


우리는 제이쿼리의 $.ajax 함수를 통해 자동완성을 구현할 것인데요, 그 전에 네이버에서는 어떤 방식으로 사용되고 있는지 알아보겠습니다. 다음은 네이버 검색창에 검색어를 입력했을 때의 요청응답입니다.  해당 이벤트는 검색창(Input) 에 'keyup' 이벤트가 발생 할 때마다 발생합니다. 해당 요청과 응답은 크롬 개발자도구(F12)의 Network 에서 확인 가능합니다. 


간단히 요약하자면 다음과 같습니다.

검색어 입력(클라이언트) -> Ajax 요청(서버 또는 클라이언트) -> 응답(서버) -> 디스플레이(클라이언트)


 


#. Code



#. index.html


다음의 코드는 검색창 하나만 있는 간단한 HTML 코드입니다. 제이쿼리를 통해 구현할 것이므로  jQuery CDN(https://code.jquery.com/) 또는 다운받은 다음, 포함시켜야 합니다. "js/auto_complete.js" 파일은 Ajax 요청을 하기위한 함수가 담겨있는 자바스크립트 파일이며 "js/request.js" 파일은 'keyup' 이벤트와 요청함수를 호출하는 코드가 담겨있습니다.


<!DOCTYPE html>

<html lang="ko">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/style.css">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="js/auto_complete.js"></script>
        <script src="js/request.js"></script>
    </head>
    <body>
        <input type="text" name="keyword">   
    </body>
</html>



#. Request.js


요청은 어떨 때 보내야할까요? 바로 사용자가 문자를 검색창에 입력할 때마다 보내야 합니다. 해당 코드는 검색창에 'keyup' 이벤트가 발생 할 때마다, auto_complete_keyword 함수를 호출합니다. 



$("input[name='keyword']").on('keyup' , function() { // 검색어 입력
    $query = $("input[name='keyword']").val();
if($query != "") { auto_complete_keyword($query, container); } else { $(container).empty(); } });



#. Auto_Complete.js


auto_complete_keyword 함수는 서버로부터 응답을 받기위해 특정문서(src/search.php)에게 요청(get)을 보내는 함수입니다. 여기서는 JSON 을 통해서 응답을 받아오며, XML을 통해서도 받아올 수 있습니다. 서버에 요청이 갈 때는 GET방식으로 보낸 경우, 다음과 같은 URL 요청이 보내집니다. 평범한 GET 방식이지요?


search.php?query=KEYWORD


function auto_complete_keyword(query, selector_container) {
    $.ajax({ // 요청
        type : 'get',
        dataType : 'json',
        url : 'src/search.php',
        data : {
            'query' : query
        },
        success : function(json) { // 응답
            if(json.length > 0 ) {
                $(selector_container).html($response); // 디스플레이
            }
        },
    });
}



#. Search.php


Search.php 에서는 클라이언트의 요청에 따라 적절하게(요청변수(GET)로 들어온 값을 통해 키워드저장 문서 또는 DB를 필터링) 데이터를 처리 해준 뒤, JSON(또는 XML) 을 echo 해주시면 응답이 끝납니다. JSON 을 리턴 할 것이므로, 결과배열을 json_encode 함수를 사용해 JSON 문자열로 만들어 주시면 됩니다.


<?php echo json_encode($res, JSON_UNESCAPED_UNICODE);


* JSON_UNESCAPED_UNICODE : json_encode 함수에서 유니코드방식으로 인코딩을 하기 위함.



#. PostScript 


현재 포스팅에서는 제이쿼리 AjaxPHP 응답을 통해 자동완성을 구현했습니다. 다음의 링크를 통해다른 방법으로 구현하는 방법을 알아볼 수 있습니다. 


Javascript XMLHttpRequest : https://www.w3schools.com/xml/xml_http.asp

PHP XMLHttpRequest : https://www.w3schools.com/php/php_ajax_livesearch.asp



신고