Français
Français
Dans le développement Web moderne, la fonction de recherche est un composant très important. Pour améliorer l'expérience utilisateur, de nombreux sites Web affichent certaines suggestions de recherche sous la zone de recherche pour aider les utilisateurs à trouver les informations qu'ils souhaitent plus rapidement. Cet article utilisera un exemple simple pour montrer comment implémenter une fonction d'interface de suggestion de recherche de backend à l'aide de la fonction PHP et mysqli_result .
Tout d'abord, nous devons nous connecter à la base de données. Ce qui suit est le code pour se connecter à l'aide de l'extension MySQLI de PHP:
<?php
$host = "localhost";
$username = "root";
$password = "yourpassword";
$database = "yourdatabase";
$conn = new mysqli($host, $username, $password, $database);
// Vérifiez la connexion
if ($conn->connect_error) {
die("Échec de la connexion: " . $conn->connect_error);
}
?>
Ce code se connecte au serveur de base de données et sélectionne une base de données pour effectuer des requêtes ultérieures.
Nous créerons une interface de suggestions de recherche simple qui permet aux utilisateurs de saisir des mots clés et le backend renvoie une liste de suggestions qui répondent aux critères. Voici le code qui implémente cette fonction:
<?php
// Obtenez des mots clés entrés par l'utilisateur
$keyword = isset($_GET['query']) ? $_GET['query'] : '';
// prévenir SQL injection
$keyword = $conn->real_escape_string($keyword);
// Définir une requête SQL Déclaration
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%' LIMIT 5";
// Exécuter une requête
$result = $conn->query($sql);
// Déterminez si la requête est réussie
if ($result->num_rows > 0) {
$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
echo json_encode($suggestions); // Retour à la liste des suggestions de recherche
} else {
echo json_encode([]); // S'il n'y a pas de résultat correspondant，Retourner un tableau vide
}
$conn->close();
?>
Dans le code ci-dessus, obtenez d'abord la chaîne de requête entrée par l'utilisateur via $ _get ['Query'] , puis utilisez la méthode real_escape_string () pour éviter les attaques d'injection SQL. Ensuite, nous utilisons des instructions SQL pour interroger les enregistrements dans le tableau des produits dans la base de données qui correspond aux mots clés entrés par l'utilisateur et à retourner jusqu'à 5 suggestions.
L'objet MySQLI_RESULT supprime les résultats de chaque ligne via la méthode fetch_assoc () et l'enregistre dans un tableau $ suggestions . Enfin, convertissez ce tableau en format JSON et sortez-le. Le frontal peut recevoir et afficher des suggestions de recherche via AJAX.
Pour que cette interface backend fonctionne avec la page Frontend, nous devons utiliser JavaScript sur le frontend pour envoyer des demandes au backend via Ajax et recevoir les données renvoyées. Voici un simple exemple de code frontal:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recherche d'exemples de suggestions</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="Entrez les mots clés de recherche..." 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>
Dans ce code frontal, nous utilisons l'événement OnInput dans la zone d'entrée. Lorsque l'utilisateur entre les caractères, la fonction getSuggestions () sera appelée et la demande est envoyée à search_suggestions.php via AJAX et les suggestions de recherche sont obtenues. Les suggestions renvoyées seront affichées sur la page via la fonction DisplaySuggestions () .
Grâce à PHP et MySQL, combinés avec la fonction MySQLI_RESULT , nous avons réussi à implémenter une fonction d'interface de suggestions de recherche de backend simple. Lorsqu'un utilisateur entre dans les mots clés, le backend renverra des suggestions pertinentes en fonction des données de la base de données, tandis que le frontend affichera ces suggestions dynamiquement via AJAX. Cet exemple montre comment utiliser MySQLI_RESULT pour obtenir efficacement les données de la base de données et les renvoyer au frontal.
