Deutsch
Deutsch
In der modernen Webentwicklung ist die Suchfunktion eine sehr wichtige Komponente. Um die Benutzererfahrung zu verbessern, zeigen viele Websites einige Suchvorschläge unter dem Suchfeld an, mit denen Benutzer die Informationen, die sie möchten, schneller finden. In diesem Artikel wird ein einfaches Beispiel verwendet, um anzuzeigen, wie eine Backend -Suchvorschlag -Schnittstellenfunktion mithilfe der Funktion PHP und MySQLI_Result implementiert werden kann.
Zunächst müssen wir eine Verbindung zur Datenbank herstellen. Im Folgenden ist der Code mithilfe der MySQLI -Erweiterung von PHP eine Verbindung hergestellt:
<?php
$host = "localhost";
$username = "root";
$password = "yourpassword";
$database = "yourdatabase";
$conn = new mysqli($host, $username, $password, $database);
// Überprüfen Sie die Verbindung
if ($conn->connect_error) {
die("Verbindung ist fehlgeschlagen: " . $conn->connect_error);
}
?>
Dieser Code stellt eine Verbindung zum Datenbankserver her und wählt eine Datenbank aus, um nachfolgende Abfragen auszuführen.
Wir erstellen eine einfache Schnittstelle für Suchvorschläge, mit der Benutzer Schlüsselwörter eingeben können, und das Backend gibt eine Liste von Vorschlägen zurück, die den Kriterien entsprechen. Hier ist der Code, der diese Funktion implementiert:
<?php
// Erhalten Sie vom Benutzer eingeben Keywords
$keyword = isset($_GET['query']) ? $_GET['query'] : '';
// verhindern SQL Injektion
$keyword = $conn->real_escape_string($keyword);
// Definieren Sie eine Frage SQL Stellungnahme
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%' LIMIT 5";
// Eine Frage ausführen
$result = $conn->query($sql);
// Stellen Sie fest, ob die Abfrage erfolgreich ist
if ($result->num_rows > 0) {
$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
echo json_encode($suggestions); // Kehren Sie zur Liste der Suchvorschläge zurück
} else {
echo json_encode([]); // Wenn es kein passendes Ergebnis gibt，Geben Sie ein leeres Array zurück
}
$conn->close();
?>
Erhalten Sie im obigen Code zuerst die vom Benutzer eingegebene Abfragezeichenfolge über $ _get ['query'] und verwenden Sie dann die Methode real_esescape_string () , um SQL -Injektionsangriffe zu vermeiden. Als nächstes verwenden wir SQL -Anweisungen , um Datensätze in der Produkttabelle in der Datenbank abzufragen, die den vom Benutzer eingegebenen Schlüsselwörtern entspricht, und bis zu 5 Vorschläge zurückgeben.
Das Objekt von MySQLI_Result nimmt die Ergebnisse jeder Zeile durch die Methode Fetch_assoc () heraus und speichert sie in ein Array $ Vorschläge . Konvertieren Sie dieses Array schließlich in das JSON -Format und geben Sie es aus. Das Front-End kann Suchvorschläge über AJAX empfangen und anzeigen.
Damit diese Backend -Schnittstelle mit der Frontend -Seite funktioniert, müssen wir JavaScript auf dem Frontend verwenden, um Anfragen über AJAX an das Backend zu senden und die zurückgegebenen Daten zu empfangen. Hier ist ein einfaches Beispiel für Front-End-Code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suchen Sie nach Vorschlägen Beispiele</title>
<style>
#suggestions {
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.suggestion-item {
padding: 8px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Geben Sie Suchschlüsselwörter ein..." oninput="getSuggestions()">
<div id="suggestions"></div>
<script>
function getSuggestions() {
var query = document.getElementById('search').value;
if (query.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search_suggestions.php?query=' + query, true);
xhr.onload = function() {
if (xhr.status == 200) {
var suggestions = JSON.parse(xhr.responseText);
displaySuggestions(suggestions);
}
}
xhr.send();
} else {
document.getElementById('suggestions').innerHTML = '';
}
}
function displaySuggestions(suggestions) {
var suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = '';
suggestions.forEach(function(item) {
var div = document.createElement('div');
div.classList.add('suggestion-item');
div.textContent = item;
suggestionsDiv.appendChild(div);
});
}
</script>
</body>
</html>
In diesem Front-End-Code verwenden wir das Oninput- Ereignis im Eingabefeld. Wenn der Benutzer Zeichen eingibt, wird die Funktion von GetOgGestions () aufgerufen, und die Anfrage wird über AJAX an search_sugestions.php gesendet und die Suchvorschläge werden erhalten. Die zurückgegebenen Vorschläge werden auf der Seite über die Funktion displaysugestions () angezeigt.
Durch PHP und MySQL, kombiniert mit der Funktion MySQLi_Result , haben wir eine einfache Funktion der Backend -Suchvorschlags -Schnittstelle erfolgreich implementiert. Wenn ein Benutzer Schlüsselwörter eingibt, gibt das Backend relevante Vorschläge basierend auf den Daten in der Datenbank zurück, während die Frontend diese Vorschläge dynamisch über AJAX anzeigt. In diesem Beispiel wird angezeigt, wie MySQLI_Result verwendet wird, um Daten aus der Datenbank effizient zu erhalten und sie an das Front-End zurückzugeben.
