English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans ce tutoriel, vous apprendrez à créer une fonction de recherche en temps réel de base de données MySQL en utilisant PHP et Ajax.
Vous pouvez créer une fonction de recherche en temps réel de base de données simple en utilisant Ajax et PHP, qui affichera les résultats de recherche lorsque vous commencez à saisir des caractères dans la zone de saisie de recherche.
Dans ce tutoriel, nous allons créer une boîte de recherche en temps réel qui recherchera dans la table countries et affichera les résultats de manière asynchrone. Cependant, avant tout, nous devons créer cette table.
Exécutez la requête SQL suivante pour créer la table countries dans la base de données MySQL.
CREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );
After creating the table, you need to useSQL INSERT statementfill in some data.
If you are not familiar with the steps to create a table, please seeSQL CREATE TABLE statementtutorial to get detailed information about the syntax for creating tables in the MySQL database system.
Now, let's create a simple web interface that allows users to search for "countries" in real time"available in the tablele fichier "search.php", qui reçoit des données/paysname, as if it were auto-completion or pre-input.
Create a named "search-put the following code in the PHP file "form.php".
<!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>PHP MySQL database real-time search</title> <style type="text/css"> body{ font-family: Arail, sans-serif; } /*Set the style of the search box */ .search-box{ width: 300px; position: relative; display: inline-block; font-size: 14px; } .search-box input[type="text"]{ height: 32px; padding: 5px 10px; border: 1px solid #CCCCCC; font-size: 14px; } .result{ position: absolute; z-index: 999; top: 100%; left: 0; } .search-box input[type="text"], .result{ width: 100%; box-sizing: border-box; } /* Formatting result items */ .result p{ margin: 0; padding: 7px 10px; border: 1px solid #CCCCCC; border-top: none; cursor: pointer; } .result p:hover{ background: #f2f2f2; } div>/style> <script src="https://code.jquery.com/jquery-1.12.4jquery/}); ./.min.js">< <script type="text javascript">-$(document).ready(function(){ /*$('.search */ box input[type="text"]').on("keyup input", function(){ Obtenir la valeur de l'entrée lors de la modification var inputVal = $(this).val(); var resultDropdown = $(this).siblings(".result");-if(inputVal.length){ //$.get("search.php", {term: inputVal}).done(function(data){ Afficher les données retournées dans le navigateur $(this).parent(".result").empty(); } else { resultDropdown.html(data); } $(this).parent(".result").empty(); //resultDropdown.empty(); Définir la valeur de l'entrée de recherche au clic sur une entrée de résultat $(document).on("click", ".result p", function(){-$(this).parent(".search $(this).parent(".result").find('input[type="text"]').val($(this).text()); $(this).parent(".result").empty(); $(this).parent(".result").empty(); div>/}); div>/script> head>-<div class="search box"> /<input type="text" autocomplete="off" placeholder="Recherche pays..." >/<div class="result">< div>/<div class="result">< div>/<
html>-à chaque fois que le contenu de l'entrée de recherche est modifié ou qu'un événement de saisie se produit sur l'entrée de recherche, le code jQuery envoie une requête Ajax au "backend"le fichier "search.php", qui reçoit des données/paysrégioncountriesRecherchez les mots-clés recherchés dans le tableau. Ces enregistrements seront insérés par jQuery plus tard.<div>et affichées dans le navigateur.
C'est notre "backend"-le code source du fichier "search.php", qui recherche dans la base de données en fonction de la chaîne de recherche envoyée par la requête Ajax et envoie les résultats au navigateur.
<?php /* essayer de se connecter au serveur MySQL. Supposons que vous exécutez MySQL serveur avec les paramètres par défaut (utilisateur "root", sans mot de passe) */ $link = mysqli_connect("localhost", "root", "", "demo"); //Vérifier la connexion if($link === false){ die("Erreur : Impossible de se connecter. " . mysqli_connect_error()); } if(isset($_REQUEST["term"])){ //Préparer la requête SELECT $_sql = "SELECT * FROM countries WHERE name LIKE ?"; if($stmt = mysqli_prepare($link, $sql)){ //Lier les variables en tant que paramètres à la requête préparée mysqli_stmt_bind_param($stmt, "s", $param_term); //Définir les paramètres $param_term = $_REQUEST["term"] . '%'; // Attempt to exécuter la requête préparée if(mysqli_stmt_execute($stmt)){ $result = mysqli_stmt_get_result($stmt); //Vérifier le nombre de lignes dans le jeu de résultats if(mysqli_num_rows($result) > 0){ //Récupérer les lignes de résultats en tant qu'array associatif while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ echo "<p>" . $_row["name"] . "</p>"; } } else { echo "<p>aucun enregistrement correspondant trouvé</p>"; } } else { echo "Erreur : Impossible d'exécuter $sql." . mysqli_error($link); } } //terminer l'instruction mysqli_stmt_close($stmt); } //fermer la connexion mysqli_close($link); ?>
<?php /* essayer de se connecter au serveur MySQL. Supposons que vous exécutez MySQL serveur avec les paramètres par défaut (utilisateur "root", sans mot de passe) */ $mysqli = new mysqli("localhost", "root", "", "demo"); //Vérifier la connexion if($mysqli === false){ die("Erreur : Impossible de se connecter. " . $mysqli-connect_error); } if(isset($_REQUEST["term"])){ //Requête préparée select $_sql = "SELECT * FROM countries WHERE name LIKE ?"; if($stmt = $mysqli-prepare($sql)){ //Lier les variables en tant que paramètres à la requête préparée $_stmt-bind_param("s", $param_term); //Définir les paramètres $param_term = $_REQUEST["term"] . '%'; // Tenter d'exécuter la requête préparée if($_stmt-execute()){ $result = $stmt-get_result(); //Vérifier le nombre de lignes dans le jeu de résultats if($result-num_rows > 0){ //Récupérer les lignes de résultats en tant qu'array associatif while($row = $result-fetch_array(MYSQLI_ASSOC)){ echo "<p>" . $_row["name"] . "</p>"; } } else { echo "<p>aucun enregistrement correspondant trouvé</p>"; } } else { echo "Erreur : Impossible d'exécuter $sql." . mysqli_error($link); } } //terminer l'instruction $_stmt->close(); } //fermer la connexion $_mysqli->close(); ?>
<?php /* essayer de se connecter au serveur MySQL. Supposons que vous exécutez MySQL serveur avec les paramètres par défaut (utilisateur "root", sans mot de passe) */ try{ $_pdo = new PDO("mysql:host=localhost;dbname=demo", "root", ""); //configurer le modèle d'erreur PDO en exception $_pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $_e) { die("Erreur : Impossible de se connecter. $_e");->getMessage()); } //essayer d'exécuter la requête de recherche try{ if(isset($_REQUEST["term"])){ //créer l'instruction préparée $_sql = "SELECT * FROM countries WHERE name LIKE :term"; $_stmt = $_pdo->prepare($_sql); $_term = $_REQUEST["term"] . "%"; //lier les paramètres à l'instruction $_stmt->bindParam(":term", $_term); //exécuter l'instruction préparée $_stmt->execute(); if($_stmt->rowCount() > 0){ while($_row = $_stmt->fetch()){ echo "<p>" . $_row["name"] . "</p>"; } } else { echo "<p>aucun enregistrement correspondant trouvé</p>"; } } } catch(PDOException $_e) { die("Erreur : Impossible d'exécuter $_sql. $_e");->getMessage()); } //terminer l'instruction unset($stmt); //fermer la connexion unset($pdo); ?>
SQL SELECTrequête avecLIKEl'utilisation combinée des opérateurs, pourcountrieschercher des enregistrements correspondants dans une table de base de données. Nous avons mis en œuvrerequêtes préparées,pour améliorer la performance de la recherche et prévenirinjection SQLattaque.
Attention :Avant d'utiliser les entrées utilisateur dans une requête SQL, il est toujours recommandé de les filtrer et de les valider. Vous pouvez également utiliser la fonction PHP mysqli_real_escape_string() pour échapper les caractères spéciaux des entrées utilisateur et créer des chaînes SQL valides pour prévenir les injections SQL.