Comment faire un input Bootstrap avec auto-complétion en Ajax et PHP ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-03-25 15:53:31

Question

Bonjour, Je cherche un script pour concevoir un input Bootstrap avec auto-complétion des résultats, en Ajax et PHP, et si possible sans utiliser jQuery ; j'utilise MySQL comme base de données. Merci.

Réponse

Pour concevoir un input Bootstrap avec auto-complétion, en Ajax et PHP, sans jQuery, vous allez devoir créer deux fichiers :

Un fichier qui contient le code HTML ainsi que le code JavaScript.
Un second fichier avec le code PHP pour effectuer la requête sur la base MySQL.

Pour effectuer un appel Ajax, sans jQuery, vous devez utiliser les objets XMLHttpRequest comme explicité via cette autre question.

Voici un exemple : fichier nommé index.php : il contient le code HTML ainsi que le code JavaScript pour l'appel Ajax :

<!DOCTYPE html>
<html lang="fr">
  <head>
  <meta charset="utf-8">
  <title>Comment créer un champ de recherche avec auto-complétion ?</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">    
  <style>
  #select {
    position:absolute;
    width:250px;
  }
  .resultat {
    cursor:pointer;
  }
  </style>
  </head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 mt-3">
        <div class="mb-3">
          <input class="form-control" type="text" id="texte" placeholder="Saisissez la première lettre du nom d'un pays" onKeyUp="doAjax();">
        </div>
        <div class="mb-3" id="select">  
          
        </div>
      </div>
    </div>
  </div>
  <script>
  var ajax = new XMLHttpRequest();
  var select = document.getElementById("select");
  ajax.onreadystatechange = function() 
  {
    if ((this.readyState == 4) && (this.response != ""))
    { 
      select.classList.remove("d-none");
      select.innerHTML = this.response;
      select.size = select.length;
    }
    else select.classList.add("d-none");
  };
  function doAjax() 
  {
    ajax.open('POST', 'ajax.php', true);
    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    var texte = document.getElementById("texte").value;
    ajax.send('texte=' + texte);
  }
  function doAction(resultat) 
  {
    var selection = resultat.innerHTML;
    document.getElementById("texte").value = selection;
    select.innerHTML = "";
    select.classList.add("d-none");
    // Ajoutez ici une action à effectuer : requete Ajax ou autres...
    alert("Vous avez sélectionné " + selection);
  }
  </script>
</body>
</html>

Ensuite le fichier ajax.php : il contient la requête sur la base de données. Vous devez l'adapter selon la requête SQL à effectuer.

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);

$resultat = "";

if (isset($_POST['texte']) && ($_POST['texte'] != "")) 
{
  $link = mysqli_connect("localhost","utilisateur","mot de passe","nom de la base");
  $texte = mysqli_real_escape_string($link, $_POST['texte']);
  $requete = mysqli_query($link,"SELECT * FROM table WHERE colonne LIKE '".$texte."%'") or die(mysqli_error($link));    
  while ($row = mysqli_fetch_array($requete, MYSQLI_ASSOC)) 
  {  
    $pays = htmlspecialchars($row["nom"], ENT_QUOTES);
    $resultat .= "<div class='row'><div class='col-md-12 mb-1 resultat' onclick='doAction(this);'>".$pays."</div></div>";  
  }
  echo $resultat;
  mysqli_close($link);
}
?>

Vous trouverez une démo de ce script via cette page.