• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>Ajax Suggestion</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        $(function() {
10
            // <input>요소에 문자가 입력될 때마다 호출됨.
11
            $("#search_box").keyup(function() {
12
                $.ajax({    // Ajax 요청을 작성하고 GET 방식으로 전송함.
13
                    url: "/examples/media/ajax_suggestion.php",
14
                    data: { keyword: $(this).val() },
15
                    method: "GET"
16
                })          // Ajax 응답을 정상적으로 받으면 실행됨.
17
                .done(function(result) {
18
                    $("#suggestion_box").html(result);
19
                })
20
            })
21
        });
22
    </script>
23
</head>
24
​
25
<body>
26
​
27
    <h1>검색어 추천 기능</h1>
28
    <p>대한민국의 도시를 영문으로 찾아보세요!</p>
29
    <form action="/examples/media/tcpschool_request.php">
30
        <input id="search_box" type="text" name="city" size="20">
31
        <div id="suggestion_box"></div>
32
    </form>
33
​
34
</body>
35
​
36
</html>