PHP - AJAX 自動補完検索

はじめに

こんにちは！PHPとAJAXを使ったプログラミングの世界へようこそ。今日は、PHPとAJAXを使って自動補完検索機能を作成する方法を深く掘り下げます。このチュートリアルはプログラミングの経験がない初心者向けに設計されています。それでは、始めましょう！

PHP - AJAX Auto Complete Search

XML ドキュメント

自動補完検索機能を作成する前に、データソースとして使用するXMLドキュメントを設定する必要があります。XMLドキュメントは、人間と機械の両方に簡単に読み取れるように構造化された形式でデータを保存するコレクションです。この場合、私たちのXMLドキュメントには世界中の都市のリストが含まれます。

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>ニューヨーク</city>
<city>ロサンゼルス</city>
<city>シカゴ</city>
<city>ヒューストン</city>
<city>フェニックス</city>
<city>フィラデルフィア</city>
<city>サンアントニオ</city>
<city>サンディエゴ</city>
<city>ダラス</city>
<city>サンジョセ</city>
</cities>

このXMLドキュメントを cities.xml として、PHPファイルと同じディレクトリに保存してください。

JavaScriptコード

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 という関数を定義しています。ユーザーが検索ボックスに何かを入力すると、この関数が入力値で呼び出されます。入力長がゼロの場合、サジェスションリストをクリアします。それ以外の場合、 get_suggestions.php というPHPファイルにAJAXリクエストを送信するための XMLHttpRequest オブジェクトを作成します。

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コードでは、まずXMLドキュメントを simplexml_load_file 関数で読み込みます。次に、XMLドキュメント内の各都市をループして、クエリ文字列が都市名に含まれているかどうかをチェックします（大文字小文字を区別しません）。一致が見つかった場合、都市を $matchingCities 配列に追加します。最後に、一致した都市名を含む無秩序リスト（ <ul> ）を输出します。

それで終わりです！あなたは今、PHPとAJAXを使った基本的な自動補完検索機能を持っています。すべてのファイル（ index.html 、 autocomplete.js 、 get_suggestions.php ）を同じディレクトリに配置し、 index.html をウェブブラウザで開いて検索ボックスが動作するか確認してください。

プログラミングの旅を続ける中で、ReactやAngularなどのフレームワークを使ったり、Vue.jsやSvelteなどの現代的なフロントエンドライブラリを使ったりして自動補完機能を実装する方法也有很多があります。しかし、このシンプルな例は、あなたが基盤を築くのに役立つはずです。

ハッピーコーディング！

Credits: Image by storyset