[jQuery] 19. Ajax로 검색 기능 만들기

지난 글에서는 jQuery의 Ajax 기초 사용법에 대해 알아봤습니다.

이번 글에서는 Ajax를 활용해서 검색 기능을 만드는 방법을 알아보겠습니다.

검색 기능은 게시글 검색, 상품 검색, 회원 검색, 영화 검색, 자동완성 검색처럼 실제 웹 서비스에서 정말 자주 사용됩니다.

Ajax 검색을 사용하면 페이지 전체를 새로고침하지 않고, 검색 결과 영역만 부드럽게 바꿀 수 있습니다.

1. Ajax 검색이란?

Ajax 검색은 사용자가 입력한 검색어를 서버로 보내고, 서버에서 받은 결과를 화면 일부에만 출력하는 방식입니다.

일반 검색은 검색 버튼을 누르면 페이지가 새로고침되거나 다른 페이지로 이동할 수 있습니다.

하지만 Ajax 검색은 현재 페이지를 유지한 채 검색 결과 영역만 바뀝니다.

페이지 새로고침 없이 검색 가능
검색 결과 영역만 갱신 가능
사용자가 더 빠르게 결과를 확인 가능
검색창, 자동완성, 필터 기능에 자주 사용

2. Ajax 검색 흐름

Ajax 검색은 보통 다음 순서로 동작합니다.

사용자가 검색어를 입력합니다.
검색 버튼을 클릭하거나 Enter를 누릅니다.
jQuery가 검색어를 가져옵니다.
Ajax로 서버에 검색어를 보냅니다.
서버가 검색 결과를 JSON으로 응답합니다.
jQuery가 결과를 화면에 출력합니다.

핵심은 검색어를 서버로 보내고, 받은 결과를 화면에 다시 그리는 것입니다.

3. 기본 HTML 구조 만들기

먼저 검색창, 검색 버튼, 결과를 출력할 영역을 만들어보겠습니다.

📌 HTML 코드

<input type="text" id="keyword" placeholder="검색어를 입력하세요">
<button id="searchBtn">검색</button>

<p id="status"></p>

<ul id="resultList"></ul>

각 요소의 역할은 다음과 같습니다.

#keyword : 사용자가 검색어를 입력하는 input입니다.
#searchBtn : 검색 요청을 실행하는 버튼입니다.
#status : 로딩, 오류, 결과 없음 문구를 표시하는 영역입니다.
#resultList : 검색 결과 목록을 출력하는 ul입니다.

4. 검색어 가져오기

검색 버튼을 클릭했을 때 input에 입력된 값을 가져오려면 val()을 사용합니다.

📌 예제 코드

<input type="text" id="keyword" placeholder="검색어 입력">
<button id="searchBtn">검색</button>

<script>
  $("#searchBtn").click(function() {
    var keyword = $("#keyword").val().trim();

    alert("검색어: " + keyword);
  });
</script>

📌 실행 결과

검색창에 글자를 입력합니다.
검색 버튼을 클릭합니다.
alert 창에 입력한 검색어가 표시됩니다.

trim()은 앞뒤 공백을 제거합니다. 검색어가 공백만 입력되는 것을 막을 때 유용합니다.

5. 빈 검색어 막기

검색어가 비어 있는데 Ajax 요청을 보내면 불필요한 요청이 발생할 수 있습니다.

검색어가 비어 있으면 요청을 보내지 않고 안내 문구를 보여주는 것이 좋습니다.

📌 예제 코드

$("#searchBtn").click(function() {
  var keyword = $("#keyword").val().trim();

  if (keyword === "") {
    $("#status").text("검색어를 입력해주세요.");
    $("#resultList").empty();
    return;
  }

  $("#status").text("검색어: " + keyword);
});

📌 실행 결과

검색어를 입력하지 않고 버튼을 클릭합니다.
"검색어를 입력해주세요." 문구가 표시됩니다.
Ajax 요청은 실행되지 않습니다.

6. Ajax로 검색 요청 보내기

이제 검색어를 서버로 보내보겠습니다.

여기서는 서버에 /api/search라는 검색 API가 있다고 가정하겠습니다.

📌 Ajax 검색 요청 코드

$.ajax({
  url: "/api/search",
  method: "GET",
  data: {
    keyword: keyword
  },
  dataType: "json",
  success: function(result) {
    console.log(result);
  },
  error: function() {
    alert("검색 중 오류가 발생했습니다.");
  }
});

data에 작성한 keyword 값이 서버로 전달됩니다.

GET 요청에서는 보통 다음과 같은 형태로 서버에 전달됩니다.

/api/search?keyword=검색어

7. 서버 응답 JSON 예시

검색 결과는 보통 배열 형태의 JSON으로 받을 수 있습니다.

📌 서버 응답 예시

[
  {
    "title": "jQuery 선택자 정리",
    "category": "jQuery"
  },
  {
    "title": "jQuery Ajax 기초",
    "category": "Ajax"
  },
  {
    "title": "Ajax 검색 기능 만들기",
    "category": "Ajax"
  }
]

이런 배열 데이터를 받으면 $.each()를 사용해서 화면에 반복 출력할 수 있습니다.

8. 검색 결과 출력하기

서버에서 받은 검색 결과를 ul 안에 li로 출력해보겠습니다.

📌 예제 코드

success: function(results) {
  $("#resultList").empty();

  $.each(results, function(index, item) {
    var li = $("<li></li>").text(item.title + " - " + item.category);
    $("#resultList").append(li);
  });

  $("#status").text("검색이 완료되었습니다.");
}

📌 실행 흐름

기존 검색 결과를 empty()로 비웁니다.
서버에서 받은 배열을 $.each()로 반복합니다.
각 데이터를 li 태그로 만듭니다.
resultList에 append()로 추가합니다.

기존 결과를 비우지 않으면 검색할 때마다 결과가 계속 누적될 수 있습니다.

9. 검색 결과가 없을 때 처리하기

검색 결과가 없을 수도 있습니다.

이때는 빈 화면으로 두기보다 "검색 결과가 없습니다."라는 문구를 보여주는 것이 좋습니다.

📌 예제 코드

success: function(results) {
  $("#resultList").empty();

  if (results.length === 0) {
    $("#status").text("검색 결과가 없습니다.");
    return;
  }

  $.each(results, function(index, item) {
    var li = $("<li></li>").text(item.title);
    $("#resultList").append(li);
  });

  $("#status").text(results.length + "개의 결과를 찾았습니다.");
}

📌 실행 결과

검색 결과가 있으면 목록이 표시됩니다.
검색 결과가 없으면 안내 문구가 표시됩니다.
사용자는 검색이 실패한 것인지, 결과가 없는 것인지 쉽게 알 수 있습니다.

10. 로딩 문구 표시하기

Ajax 요청은 서버 응답을 기다리는 시간이 있을 수 있습니다.

검색 버튼을 누른 뒤 바로 "검색 중입니다..." 문구를 보여주면 사용자가 현재 상태를 이해하기 쉽습니다.

📌 예제 코드

$("#status").text("검색 중입니다...");
$("#resultList").empty();

$.ajax({
  url: "/api/search",
  method: "GET",
  data: {
    keyword: keyword
  },
  dataType: "json",
  success: function(results) {
    $("#status").text("검색이 완료되었습니다.");
  },
  error: function() {
    $("#status").text("검색 중 오류가 발생했습니다.");
  }
});

📌 실행 흐름

검색 버튼을 누르면 먼저 로딩 문구가 표시됩니다.
검색 결과 영역을 비웁니다.
서버 응답이 오면 결과를 출력합니다.
오류가 발생하면 오류 문구를 표시합니다.

11. form submit으로 검색하기

검색창은 버튼 클릭뿐 아니라 Enter 키로도 검색되게 만드는 것이 좋습니다.

이럴 때는 input과 button을 form으로 감싸고 submit 이벤트를 사용합니다.

📌 예제 코드

<form id="searchForm">
  <input type="text" id="keyword" placeholder="검색어 입력">
  <button type="submit">검색</button>
</form>

<p id="status"></p>
<ul id="resultList"></ul>

<script>
  $("#searchForm").on("submit", function(event) {
    event.preventDefault();

    var keyword = $("#keyword").val().trim();

    if (keyword === "") {
      $("#status").text("검색어를 입력해주세요.");
      return;
    }

    $("#status").text("검색 요청: " + keyword);
  });
</script>

📌 실행 결과

검색어를 입력하고 Enter를 누릅니다.
form submit 이벤트가 실행됩니다.
event.preventDefault()로 페이지 새로고침을 막습니다.
검색어를 검사한 뒤 Ajax 검색을 실행할 수 있습니다.

12. 실시간 검색 만들기

검색 버튼을 누르지 않아도 입력할 때마다 검색되게 만들 수 있습니다.

이럴 때는 input 이벤트를 사용합니다.

📌 예제 코드

$("#keyword").on("input", function() {
  var keyword = $(this).val().trim();

  if (keyword === "") {
    $("#status").text("검색어를 입력해주세요.");
    $("#resultList").empty();
    return;
  }

  $("#status").text("실시간 검색어: " + keyword);
});

다만 input 이벤트만 사용하면 글자를 입력할 때마다 계속 Ajax 요청이 발생할 수 있습니다.

그래서 실제 프로젝트에서는 요청 횟수를 줄이는 처리가 필요합니다.

13. debounce로 요청 횟수 줄이기

사용자가 글자를 입력할 때마다 바로 Ajax 요청을 보내면 서버 요청이 너무 많아질 수 있습니다.

이럴 때는 사용자가 입력을 잠시 멈춘 뒤 검색을 실행하는 방식이 좋습니다.

이런 방식을 보통 debounce라고 부릅니다.

📌 debounce 예제 코드

var searchTimer = null;

$("#keyword").on("input", function() {
  var keyword = $(this).val().trim();

  clearTimeout(searchTimer);

  searchTimer = setTimeout(function() {
    if (keyword === "") {
      $("#status").text("검색어를 입력해주세요.");
      $("#resultList").empty();
      return;
    }

    $("#status").text("검색 실행: " + keyword);

    // 이 위치에서 Ajax 검색 실행
  }, 300);
});

📌 동작 방식

사용자가 글자를 입력합니다.
기존 예약된 검색을 clearTimeout()으로 취소합니다.
300ms 동안 추가 입력이 없으면 검색을 실행합니다.
입력할 때마다 서버 요청이 발생하는 문제를 줄일 수 있습니다.

14. 카테고리와 검색어 함께 보내기

검색 기능에서는 검색어뿐 아니라 카테고리, 정렬 기준, 필터 값을 함께 보낼 수 있습니다.

📌 HTML 코드

<select id="category">
  <option value="">전체</option>
  <option value="notice">공지</option>
  <option value="free">자유글</option>
  <option value="qna">질문</option>
</select>

<input type="text" id="keyword" placeholder="검색어 입력">
<button id="searchBtn">검색</button>

📌 Ajax 코드

$("#searchBtn").click(function() {
  var category = $("#category").val();
  var keyword = $("#keyword").val().trim();

  $.ajax({
    url: "/api/search",
    method: "GET",
    data: {
      category: category,
      keyword: keyword
    },
    dataType: "json",
    success: function(results) {
      console.log(results);
    }
  });
});

서버에는 category와 keyword가 함께 전달됩니다.

/api/search?category=notice&keyword=jquery

15. 전체 예제

이번에는 검색어를 입력하고 Ajax로 검색 결과를 받아 화면에 출력하는 전체 예제를 만들어보겠습니다.

아래 코드는 /api/search API가 JSON 배열을 응답한다고 가정한 예제입니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Ajax 검색 기능</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #searchForm {
      margin-bottom: 15px;
    }

    #keyword {
      padding: 8px;
      width: 220px;
    }

    #searchBtn {
      padding: 8px 12px;
    }

    #status {
      font-weight: bold;
      margin: 10px 0;
    }

    #resultList {
      padding: 0;
      list-style: none;
    }

    #resultList li {
      padding: 10px;
      margin-bottom: 8px;
      background: #eeeeee;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <h2>jQuery Ajax 검색 기능</h2>

  <form id="searchForm">
    <input type="text" id="keyword" placeholder="검색어를 입력하세요">
    <button type="submit" id="searchBtn">검색</button>
  </form>

  <p id="status"></p>

  <ul id="resultList"></ul>

  <script>
    $(function() {
      $("#searchForm").on("submit", function(event) {
        event.preventDefault();

        var keyword = $("#keyword").val().trim();

        if (keyword === "") {
          $("#status").text("검색어를 입력해주세요.");
          $("#resultList").empty();
          return;
        }

        $("#status").text("검색 중입니다...");
        $("#resultList").empty();

        $.ajax({
          url: "/api/search",
          method: "GET",
          data: {
            keyword: keyword
          },
          dataType: "json",
          success: function(results) {
            $("#resultList").empty();

            if (results.length === 0) {
              $("#status").text("검색 결과가 없습니다.");
              return;
            }

            $.each(results, function(index, item) {
              var li = $("<li></li>");
              var title = $("<strong></strong>").text(item.title);
              var category = $("<span></span>").text(" [" + item.category + "]");

              li.append(title).append(category);
              $("#resultList").append(li);
            });

            $("#status").text(results.length + "개의 검색 결과를 찾았습니다.");
          },
          error: function() {
            $("#status").text("검색 중 오류가 발생했습니다.");
          }
        });
      });
    });
  </script>

</body>
</html>

📌 서버 응답 예시

[
  {
    "title": "jQuery 선택자 정리",
    "category": "jQuery"
  },
  {
    "title": "Ajax 기초 사용법",
    "category": "Ajax"
  }
]

📌 실행 결과

검색어를 입력하고 검색 버튼을 클릭합니다.
form submit 이벤트가 실행됩니다.
검색어가 비어 있으면 안내 문구를 표시합니다.
검색어가 있으면 Ajax GET 요청을 보냅니다.
검색 결과가 있으면 목록으로 출력합니다.
검색 결과가 없으면 결과 없음 문구를 표시합니다.
오류가 발생하면 오류 문구를 표시합니다.

16. 실시간 검색 전체 예제

이번에는 input 이벤트와 debounce를 사용해서 실시간 검색 구조를 만들어보겠습니다.

📌 예제 코드

<input type="text" id="keyword" placeholder="검색어 입력">

<p id="status"></p>
<ul id="resultList"></ul>

<script>
  var searchTimer = null;

  $("#keyword").on("input", function() {
    var keyword = $(this).val().trim();

    clearTimeout(searchTimer);

    searchTimer = setTimeout(function() {
      if (keyword === "") {
        $("#status").text("검색어를 입력해주세요.");
        $("#resultList").empty();
        return;
      }

      $("#status").text("검색 중입니다...");
      $("#resultList").empty();

      $.ajax({
        url: "/api/search",
        method: "GET",
        data: {
          keyword: keyword
        },
        dataType: "json",
        success: function(results) {
          if (results.length === 0) {
            $("#status").text("검색 결과가 없습니다.");
            return;
          }

          $.each(results, function(index, item) {
            $("#resultList").append(
              $("<li></li>").text(item.title)
            );
          });

          $("#status").text(results.length + "개의 결과를 찾았습니다.");
        },
        error: function() {
          $("#status").text("검색 중 오류가 발생했습니다.");
        }
      });
    }, 300);
  });
</script>

실시간 검색은 편리하지만 서버 요청이 많아질 수 있습니다.

그래서 debounce를 사용해서 사용자가 입력을 잠시 멈췄을 때만 검색 요청을 보내는 것이 좋습니다.

17. 자주 하는 실수

📌 1. 검색어가 비어 있는데 요청을 보내는 경우

검색어가 비어 있으면 Ajax 요청을 보내기 전에 막아야 합니다.

if (keyword === "") {
  $("#status").text("검색어를 입력해주세요.");
  return;
}

📌 2. 기존 결과를 비우지 않는 경우

검색할 때마다 기존 결과를 비우지 않으면 결과가 계속 누적됩니다.

$("#resultList").empty();

📌 3. 검색 결과 없음 처리를 하지 않는 경우

검색 결과가 없을 때 아무 문구도 없으면 사용자는 오류인지 결과가 없는지 알기 어렵습니다.

if (results.length === 0) {
  $("#status").text("검색 결과가 없습니다.");
  return;
}

📌 4. 실시간 검색에서 요청을 너무 많이 보내는 경우

input 이벤트만 사용하면 글자를 입력할 때마다 요청이 발생할 수 있습니다.

실시간 검색에서는 debounce를 사용해서 요청 횟수를 줄이는 것이 좋습니다.

📌 5. 서버 응답 구조를 확인하지 않는 경우

서버에서 title, category로 보내는지 name, type으로 보내는지 확인해야 합니다.

// 서버 응답이 { "title": "글 제목" } 이라면
item.title

📌 6. form submit에서 preventDefault()를 빼먹는 경우

form을 사용해서 Ajax 검색을 만들 때는 기본 제출을 막아야 페이지가 새로고침되지 않습니다.

$("#searchForm").on("submit", function(event) {
  event.preventDefault();
});

📌 7. jQuery 연결을 빼먹는 경우

Ajax 검색도 jQuery 기능이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

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

18. 핵심 정리

Ajax 검색은 페이지 새로고침 없이 검색 결과만 갱신하는 방식입니다.
검색어는 val().trim()으로 가져오면 좋습니다.
검색어가 비어 있으면 Ajax 요청을 보내지 않는 것이 좋습니다.
검색 요청은 보통 GET 방식으로 처리합니다.
검색어는 data 옵션에 담아 서버로 보낼 수 있습니다.
검색 결과는 JSON 배열로 받는 경우가 많습니다.
배열 결과는 $.each()로 반복 출력할 수 있습니다.
검색 전에 기존 결과를 empty()로 비우는 것이 좋습니다.
결과 없음, 로딩 중, 오류 문구를 따로 처리하면 사용자 경험이 좋아집니다.
실시간 검색에서는 debounce로 요청 횟수를 줄이는 것이 좋습니다.

이번 글에서는 jQuery Ajax를 사용해서 검색 기능을 만드는 방법을 알아봤습니다.

검색 기능은 실제 웹 서비스에서 자주 사용되는 기능입니다. 검색어 입력, Ajax 요청, 결과 출력, 결과 없음 처리, 오류 처리를 함께 익히면 게시판 검색이나 상품 검색 같은 기능을 만들 때 큰 도움이 됩니다.

다음 글에서는 [jQuery] 20. jQuery 자주 하는 실수와 마무리 정리에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 20. 자주 하는 실수와 마무리 정리 (0)	2026.07.01
[jQuery] 18. Ajax 기초 사용법 (0)	2026.06.29
[jQuery] 17. form 이벤트 사용법 (0)	2026.06.28
[jQuery] 16. siblings(), next(), prev() 사용법 (0)	2026.06.28
[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26