PHP - AJAX 자동 완성 검색

소개

안녕하세요! PHP와 AJAX를 사용한 프로그래밍 세계 여정에 환영합니다. 오늘 우리는 PHP와 AJAX를 사용하여 자동 완성 검색 기능을 만드는 방법을 깊이 있게 탐구할 것입니다. 이 튜토리얼은 프로그래밍 경험이 없는 초보자를 위한 것입니다. 그麼, 시작해 보겠습니다!

PHP - AJAX Auto Complete Search

XML 문서

자동 완성 검색 기능을 만들기 전에, 우리는 데이터 소스로 사용할 XML 문서를 설정해야 합니다. XML 문서는 사람과 기계 모두 쉽게 읽을 수 있는 구조화된 형식으로 저장된 데이터 모음입니다. 이 경우, 우리의 XML 문서는 전 세계의 도시 목록을 포함할 것입니다.

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>New York</city>
<city>Los Angeles</city>
<city>Chicago</city>
<city>Houston</city>
<city>Phoenix</city>
<city>Philadelphia</city>
<city>San Antonio</city>
<city>San Diego</city>
<city>Dallas</city>
<city>San Jose</city>
</cities>

이 XML 문서를 cities.xml로 저장하고 PHP 파일과 같은 디렉토리에 넣으세요.

JavaScript 코드

이제 XML 문서가 준비되었으므로, 사용자가 검색 상자에 타이핑을 시작할 때 XML 문서에서 데이터를 가져와 드롭다운 목록에 표시하는 JavaScript 코드를 작성해 보겠습니다. AJAX를 사용하여 페이지 새로 고침 없이 이를 달성할 것입니다.

먼저, 검색 상자와 드롭다운 목록을 포함한 HTML 폼을 만들어 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자동 완성 검색</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>

다음으로, autocomplete.js라는 별도의 파일에 JavaScript 코드를 작성해 보겠습니다:

function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}

이 코드에서 우리는 showSuggestions라는 함수를 정의합니다. 사용자가 검색 상자에 무언가를 타이핑할 때 이 함수가 입력 값으로 호출됩니다. 입력 길이가 zero인 경우, 제안 목록을 지우고 그렇지 않으면 XMLHttpRequest 객체를 생성하여 get_suggestions.php라는 PHP 파일로 AJAX 요청을 보냅니다. 쿼리 매개변수 q는 입력 값으로 설정됩니다.

PHP 코드

이제 PHP 쪽으로 넘어가겠습니다. 우리는 AJAX 요청을 처리하고 일치하는 도시 이름을 HTML 목록으로 반환하는 get_suggestions.php 파일을 만들 것입니다:

<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();

foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}

echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . $city . '</li>';
}
echo '</ul>';
?>

이 PHP 코드에서 우리는 먼저 simplexml_load_file 함수를 사용하여 XML 문서를 로드합니다. 그런 다음, XML 문서의 각 도시를 반복하면서 쿼리 문자열이 도시 이름에 포함되어 있는지 확인합니다 (대소문자를 구분하지 않음). 일치하는 도시가 발견되면 $matchingCities 배열에 추가합니다. 마지막으로, 일치하는 도시 이름을 포함한 비ordered 목록(<ul>)을 출력합니다.

그幺, 우리는 기본 자동 완성 검색 기능을 사용하여 PHP와 AJAX를 완성했습니다. 모든 파일(index.html, autocomplete.js, get_suggestions.php)을 같은 디렉토리에 넣고 index.html을 웹 브라우저에서 열어 검색 상자를 사용해 보세요.

프로그래밍 여정을 계속하면서, React나 Angular와 같은 프레임워크를 사용하거나 Vue.js나 Svelte와 같은 최신 프론트엔드 라이브러리를 사용하여 자동 완성 기능을 구현하는 다양한 방법을 발견할 것입니다. 하지만 지금은 이 간단한 예제가 당신에게 견고한 기초를 제공해 줄 것입니다.

즐겁게 코딩하세요!

Credits: Image by storyset