..

Search

16) 검색어 추천 기능

검색어 추천 기능


검색어 추천 기능

검색어를 입력하면 입력된 단어에 맞춰 적절한 검색어를 추천해 주는 기능은 현재 대부분의 사이트에서 사용되고 있습니다.

Ajax를 이용하면 이러한 기능을 어렵지 않게 구현할 수 있습니다.

 

이번에는 제이쿼리와 Ajax를 이용하여 간단한 검색어 추천 기능을 구현해 보도록 하겠습니다.


검색어 추천 기능의 동작 순서

검색어 추천은 검색어를 입력하는 도중에 입력된 검색어와 유사한 검색어를 화면에 표시해 주는 기능입니다.

따라서 다음과 같은 순서대로 동작하게 됩니다.

 

1. 입력된 검색어를 Ajax 요청으로 서버에 전송함.

2. 서버에서는 전송된 검색어를 이용하여 추천 검색어 목록을 작성함.

3. 작성된 추천 검색어 목록을 Ajax 응답으로 클라이언트에 전송함.

4. Ajax 응답으로 온 추천 검색어 목록을 처리하여, 화면에 출력함.

 

이 중에서 1번과 4번 작업은 클라이언트 측에서, 2번과 3번 작업은 서버 측에서 하게 됩니다.


클라이언트 측 작업

클라이언트 측에서 가장 먼저 해야 할 일은 사용자로부터 입력을 받는 것입니다.

 

사용자로부터 입력을 받기 위해서는 다음과 같이 <input>요소를 사용합니다.

아래쪽의 <div>요소는 응답으로 받은 추천 검색어 목록을 출력할 화면입니다.

ajax_application_suggestion_01.html

<form action="/examples/media/request.php">

    <input id="search_box" type="text" name="city" size="20">

    <div id="suggestion_box"></div>

</form>

 

그다음으로는 사용자가 입력한 검색어를 서버로 전송하고, 응답으로 받은 추천 검색어 목록을 화면에 출력하는 것입니다.

 

이 부분은 제이쿼리의 $.ajax() 메소드를 이용하여 다음과 같이 Ajax 요청과 응답을 구현합니다.

ajax_application_suggestion_01.html

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>

    $(function() {   // <input>요소에 문자가 입력될 때마다 호출됨.

        $("#search_box").keyup(function() {

            $.ajax({ // Ajax 요청을 작성하고 GET 방식으로 전송함.

                url: "/examples/media/ajax_suggestion.php",

                data: { keyword : $(this).val() },

                method: "GET"

            })       // Ajax 응답을 정상적으로 받으면 실행됨.

            .done(function(result) {

                $("#suggestion_box").html(result);

            })

        })

    });

</script>

 

제이쿼리의 keyup() 메소드를 이용하면 <input>요소에 문자가 하나씩 입력될 때마다 매번 Ajax 요청을 보낼 수 있습니다.

그리고 done() 메소드를 이용하여 Ajax 응답이 성공적으로 수신되면 실행할 콜백함수를 명시할 수 있습니다.


서버 측 작업

서버 측에서 해야 할 일은 Ajax 요청과 함께 전달받은 검색어를 XML 파일에서 찾아 비교하여 추천 목록을 작성하는 것입니다.

 

이때 가장 먼저 해야 할 일은 비교할 XML 파일을 로드하는 것입니다.

ajax_suggestion.php

$xmlData = new DOMDocument();

$xmlData->load("korean_city_names.xml"); // XML 파일을 로드함.

 

이 수업에서 사용할 XML 파일는 다음과 같습니다.

korean_city_names.xml

<?xml version="1.0" encoding="UTF-8"?>

<korean_cities>

    <city><name>Andong</name></city>

    <city><name>Ansan</name></city>

    <city><name>Anseong</name></city>

    <city><name>Anyang</name></city>

    <city><name>Asan</name></city>

    ...

</korean_cities>

 

그리고서 사용자가 입력한 검색어와 비교할 요소들을 선택합니다.

ajax_suggestion.php

// 로드한 XML 문서에서 태그 이름이 "name"인 모든 요소를 선택함.

$names = $xmlData->getElementsByTagName("name");

// Ajax 요청으로 전달받은 keyword 헤더의 값을 반환함.

$keyword = $_GET["keyword"];

 

이렇게 선택된 요소들과 사용자가 입력한 검색어를 순서대로 비교하여 일치하는 값만을 추천 목록에 추가하면 됩니다.

ajax_suggestion.php

$result = "";

for ($i = 0; $i < ($names->length); $i++) {

    if (!empty($keyword)) { // 아무런 입력이 없을 때를 제외함.

        $wordLength = strlen($keyword);

        // <name>요소의 텍스트 노드값을 반환함.

        $name = $names->item($i)->childNodes->item(0)->nodeValue;

        // 사용자가 입력한 글자 수만큼만 비교함.

        if (strcasecmp(substr($name, 0, $wordLength), $keyword) == 0) {

            $result .= $name.nl2br("\n");

        }

    }

}

echo $result;

 

strlen(), strcasecmp(), substr() 함수의 사용법에 대한 더 자세한 사항은 PHP 문자열 관련 함수 수업에서 확인할 수 있습니다.

 

PHP 문자열 관련 함수 수업 확인 =>


검색어 추천 Ajax 예제

위와 같은 순서대로 작성된 간단한 검색어 추천 예제는 다음과 같습니다.

예제

<head>

    <meta charset="UTF-8">

    <title>Ajax Suggestion</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script>

        $(function() {   // <input>요소에 문자가 입력될 때마다 호출됨.

            $("#search_box").keyup(function() {

                $.ajax({ // Ajax 요청을 작성하고 GET 방식으로 전송함.

                    url: "/examples/media/ajax_suggestion.php",

                    data: { keyword : $(this).val() },

                    method: "GET"

                })       // Ajax 응답을 정상적으로 받으면 실행됨.

                .done(function(result) {

                    $("#suggestion_box").html(result);

                })

            })

        });

    </script>

</head>

<body>

    <h1>검색어 추천 기능</h1>

    <p>대한민국의 도시를 영문으로 찾아보세요!</p>

    <form action="/examples/media/request.php">

        <input id="search_box" type="text" name="city" size="20">

        <div id="suggestion_box"></div>

    </form>

</body>

코딩연습 ▶


연습문제