PHP - AJAX Auto Complete Search

Einführung

Hallo da! Willkommen auf unserer Reise in die Welt der Programmierung mit PHP und AJAX. Heute tauchen wir tief ein in die Erstellung einer Auto-Vervollständigungs-Suchfunktion mit PHP und AJAX. Dieser Tutorial ist für Anfänger konzipiert, die keine Vorerfahrung in der Programmierung haben. Also, los geht's!

Das XML-Dokument

Bevor wir unsere Auto-Vervollständigungs-Suchfunktion erstellen können, müssen wir ein XML-Dokument einrichten, das als unsere Datenquelle dienen wird. Ein XML-Dokument ist eine Sammlung von Daten, die in einem strukturierten Format gespeichert sind, das sowohl von Menschen als auch von Maschinen leicht lesbar ist. In diesem Fall wird unser XML-Dokument eine Liste von Städten weltweit enthalten.

<?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>

Speichern Sie dieses XML-Dokument als cities.xml im selben Verzeichnis wie Ihre PHP-Datei.

JavaScript-Code

Nun, da wir unser XML-Dokument bereit haben, ist es an der Zeit, etwas JavaScript-Code zu schreiben, um die Daten aus dem XML-Dokument abzurufen und sie in einer Dropdown-Liste anzuzeigen, wenn der Benutzer beginnt, im Suchfeld zu tippen. Wir werden AJAX verwenden, um dies ohne 页面刷新 zu erreichen.

Zuerst erstellen wir eine HTML-Formular mit einem Suchfeld und einer Dropdown-Liste:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Auto Complete Search</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>

Als nächstes schreiben wir den JavaScript-Code in einer separaten Datei namens autocomplete.js:

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();
}
}

In diesem Code definieren wir eine Funktion namens showSuggestions, die eine Zeichenkette als Eingabe akzeptiert. Wenn der Benutzer etwas im Suchfeld eingibt, wird diese Funktion mit dem Eingabewert aufgerufen. Wenn die Eingabelänge null ist, leeren wir die Vorschlagsliste. Andernfalls erstellen wir ein XMLHttpRequest-Objekt, um eine AJAX-Anfrage an eine PHP-Datei namens get_suggestions.php zu senden, wobei der Abfrageparameter q auf den Eingabewert gesetzt wird.

PHP-Code

Nun gehen wir zur PHP-Seite der Dinge über. Wir erstellen eine Datei namens get_suggestions.php, die die AJAX-Anfrage behandelt und die passenden Stadtnamen als HTML-Liste zurückgibt:

<?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>' . htmlspecialchars($city) . '</li>';
}
echo '</ul>';
?>

In diesem PHP-Code laden wir zuerst das XML-Dokument mit der Funktion simplexml_load_file. Dann durchlaufen wir jede Stadt im XML-Dokument und überprüfen, ob die Abfragezeichenkette im Stadtnamen (unabhängig von der Groß- und Kleinschreibung) gefunden wird. Wenn eine Übereinstimmung gefunden wird, fügen wir die Stadt der $matchingCities-Array hinzu. Schließlich geben wir eine ungeordnete Liste (<ul>) mit den passenden Stadtnamen als Listenpunkte (<li>) aus.

Das war's! Sie haben jetzt eine grundlegende Auto-Vervollständigungs-Suchfunktion mit PHP und AJAX. Denken Sie daran, alle drei Dateien (index.html, autocomplete.js und get_suggestions.php) im selben Verzeichnis zu platzieren und index.html in einem Webbrowser zu öffnen, um das Suchfeld in Aktion zu sehen.

Während Sie Ihre Reise in der Programmierung fortsetzen, werden Sie feststellen, dass es viele Möglichkeiten gibt, Auto-Vervollständigungs-Funktionen zu implementieren, wie z.B. mit Frameworks wie React oder Angular, oder sogar mit modernen Frontend-Bibliotheken wie Vue.js oder Svelte. Aber für jetzt sollte dieses einfache Beispiel Ihnen eine solide Grundlage bieten, auf der Sie aufbauen können.

Viel Spaß beim Programmieren!

Credits: Image by storyset

Vorheriges Tutorial:

PHP - AJAX XML Parser

Nächstes Tutorial:

PHP - AJAX RSS Feed Beispiel