Ajouter une recherche Twitter typeahead comme Google à votre blogue avec suggestions, auto-complétion instantané

Ajouter une recherche Twitter typeahead comme Google à votre blogue avec suggestions, auto-complétion instantané

2019-05-09 Niveau: Intermédiaire

Les champs de saisie Twitter typeahead sont très populaires dans les formulaires Web modernes. Le but principal d’utilisation est d’améliorer l’expérience utilisateur en fournissant des astuces ou une liste de choix possibles en fonction du texte saisi dans le formulaire ou lors de la recherche, par exemple la recherche instantanée Google.

La fonctionnalité Typeahead permet également de gagner du temps et de réduire le nombre d'erreurs potentielles, car l'utilisateur risque moins de commettre une faute d'orthographe.

Téléchargez typeahead ici http://twitter.github.io/typeahead.js

 

Prenons l'exemple d'un blogue, comme le nôtre https://finao.ca/blogue , j'ai placé une recherche exactement comme dans notre tutoriel ici .

Essayez-le, ça recherche parmi les articles du blogue et propose des suggestions.

Nous allons avoir besoin de 3 fichiers et bien sûr d'une base de données :

 

1- db_connect.inc.php , pour la connextion à la base de données.

2- blogsearch.php , qui contient le requête qui effectue la recherche dans la BD.

3- blogue.php , qui contient le code au complet html et php.

 

Recherche avec auto-suggestion

 

1- db_connect.inc.php (l'explication du code est à l'intérieur)

<?php
//On se connecte à la base de donnée.
$conn=mysqli_connect("localhost","utilisateur","mot-de-passe","nom-de-la-base-de-données");
//Si ça ne fonctionne pas
if (mysqli_connect_errno()) {
        //nous envoyons le message d'erreur
	echo "Failed to connect:" . mysqli_connect_error();
}
//nous définissons le charset 
mysqli_set_charset($conn, 'utf8');

?>

 

2- blogsearch.php (l'explication du code est à l'intérieur)

<?php
//Inclure le fichier db_connect.inc.php pour se connecter à la base de données
require_once ('db_connect.inc.php');
    //Si nous attrapons la variable $key
    $key=$_GET['key'];
    //On dit que la variable $array est un "array();"
    $array = array();
    //On recherche dans la BD avec notre $key
    $query=mysqli_query($conn, "select * from nom-de-la-base-de-données where nom-de-la-table LIKE '%{$key}%'");
    //Ceci est une loop en php
    while($row=mysqli_fetch_assoc($query))
    {
      // On ajoute dans notre "array" ce que la loop trouve dans la ligne au nom-de-la-table en rapport avec notre mot clé recherché.
      $array[] .=''.$row['nom-de-la-table'].'';

    }
    //On affiche les résultats
    echo json_encode($array);
   // On ferme la connextion mysqli
    mysqli_close($conn);
?>

 

C'est quoi un "array"? voir ce site

w3schools.com/arrays

 

3- blogue.php

<?php
//On se connecte à la BD
require_once ('db_connect.inc.php');

//Si on clique sur le bouton "submit"
if(isset($_POST['submited'])){
//Ici on affiche le résultat de la recherche mais, on pourrait faire afficher les résultats d'une recherche dans la BD
$search = mysqli_real_escape_string($conn,$_POST['typeahead']);
//Affiche l'option choisi
echo $search;
}

?>
<!DOCTYPE html>
<html>

<?php include 'header.php';?>

<!--Inclure JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--Inclure Typeahead -->
<script src="https://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>


<!--Ceci est le script qui fait toute la magie -->

<script>
$(document).ready(function(){
//Si quelqu'un fait une recherche 
$('input.typeahead').typeahead({
    name: 'typeahead',
    //On recherche avec le fichier qu'on a créé plus haut blogsearch.php
    remote:'blogsearch.php?key=%QUERY',
    wildcard: '%QUERY',
   //On limite la requête à 20 ou autres 
    limit : 20
}).on('typeahead:selected', function(e, data) {
  //Si une sélection est faite, on déclenche l'action du bouton qui est caché "submit"
//Pourquoi le bouton est caché ? (hidden) On a pas besoin du bouton , une fois une recherche cliqué , la recherche est déclenché.
    $('#submited').trigger('click');
});
});
</script>
</header>
         <!--Voici le formulaire -->
        <form id="recherche" method="post">
        <div class="container" style="height:900px">

          <div class="col-12 text-center">
            <i style="margin-right:10px;" class="fajs  fas fa-search"></i><input  type="text" name="typeahead" id="typeahead" class="typeahead typetexte" autocomplete="off" spellcheck="false" placeholder="Rechercher">
            <button type="submit" hidden name="submited" id="submited" class="btn btnjs btn-primary">rechercher</button>
          </div>


        </div>
      </form>

  <?php include 'footer.php';?>

</body>

</html>

 

On ajoute un peu de CSS histoire de rendre ça beau, qu'on place sous "header.php" dans le fichier blogue.php, et voilà !

<style>
.typeahead, .tt-query, .tt-hint {
	padding: .3em .8em !important;
	width:320px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
	 border-radius: 5px;
	 border: 1px solid #d4d4d4;
	 margin-top: 5px;
}
.page-item{
margin-bottom:50px;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid #d4d4d4;
border-radius: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 0px 0;
width: 100%;
text-align: left!important;
}
.tt-suggestion {
font-size: 15px;
line-height: 24px;
border-bottom: 1px solid #d4d4d4;
padding: 3px 20px;
padding-left: 10px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #4285f4;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>

 


Laissez nous un commentaire