English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel PHP de base

Tutoriel PHP avancé

PHP & MySQL

Manuel de référence PHP

PHP MySQL Ajax Recherche en temps réel

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.

Recherche en temps réel de base de données 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.

Étapes1Création de la table de base de données

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.

Étapes2: Build the search form

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.

Étapes3traitement des requêtes de recherche en arrière-plan

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.

Exemple en ligne : méthode procédurale

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

Exemple en ligne : méthode orientée objet

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

Exemple en ligne : méthode PDO

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