Tutoriel : suggestions d'un moteur de recherche

Tutoriel : suggestions d'un moteur de recherche

Actuellement en plein développement de mon outil en ligne de comptabilité, une question existentielle s'est posée. Comment trouver un numéro de compte sans changer de page lors de la saisie ou de la visualisation du détail de celui-ci ? Une fois de plus, je me suis tourné vers jQuery et je vous propose donc un tutoriel.

Utiliser une base de données

Une fois de plus pour afficher des suggestions, il faut disposer de données enregistrées afin de les appeler. Pour cela, la fonction autocomplete de jQuery va être très utile. Dans un premier temps, constituez rapidement une base de données avec quelques mots-clés.

CREATE TABLE `liste_keywords` (
    `id` INT(11) NOT NULL,
    `mot` VARCHAR(100) NOT NULL
) ENGINE = MYISAM  CHARACTER SET utf8 COLLATE utf8_general_ci;
INSERT INTO `liste_keywords` (`id`, `mot`) VALUES(1, 'adwords'),(2, 'seo'),(3, 'referencement'),(4, 'cloacking'),(5, 'moteur'),(6, 'ancre'),(7, 'annuaire'),(8, 'position'),(9, 'ranking'),(10, 'sea');

Nous allons maintenant pouvoir mettre en place un formulaire de recherche avec suggestion de mot-clés. Il est important de stipuler un ID pour le champ input. Pour l'exemple, j'indique search.

<form method="post" action="recherche.php">
<input type="text" name="keyword" id="search" />
<input type="submit" name="submit" value="Chercher" />
</form>

En l'état actuel, il ne se passera rien tant que l'on ne cliquera pas sur le bouton Chercher (utile pour afficher les résultats). On va donc rajouter la touche de jQuery pour proposer les suggestions.

En haut de votre page, indiquez les identifiants de connexion à la base de données :

<?php
// Connexion a la BDD
$bddname = 'nom_de_la_base';
$hostname = 'localhost';
$username = 'utilisateur';
$password = 'mot_de_passe';
$db = mysqli_connect ($hostname, $username, $password, $bddname);
?>

La fonction magique de jQuery : autocomplete

Après avoir téléchargé jQuery et jQuery UI, entre les balises <head> de votre page, ajoutez le code suivant :

<link type="text/css" rel="stylesheet" href="css/jquery.ui.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript">
$(function() {
    var keywords = [
    <?php
    $req = "SELECT mot FROM liste_keywords ORDER BY mot";
    $rep = mysqli_query($db, $req);
    while ($row = mysqli_fetch_array($rep)) {
        echo "".$row00['mot'].",";
    }
    ?>
    ];
    $("#search").autocomplete({
        source: keywords
    });
});
</script>

Si vous regardez cet exemple, vous pourrez contempler le résultat. A vous de coder la page recherche.php pour afficher les résultats de la recherche une fois que vous aurez cliqué sur le bouton. ;)

Le petit plus

Si vous souhaitez aller plus loin et enrichir votre base de données, pensez à enregistrer les recherches des visiteurs. Un point important dans ce cas là, est de contrôler que le mot saisi n'existe pas déjà dans votre base afin d'éviter les doublons.

Avec ce petit plus, vous aurez un très bon moteur de recherche sur votre site. ;)

Catégorie Tutoriels - Écrit par le 29/11/2014 - Article lu 1 352 fois - 1 commentaire

1 réflexion sur ce billet

Écrit par Jerry
Le 06/01/2015 à 02h59

Pour des données non confidentielles, Il y a l'élément en HTML. L'autocomplétion est ainsi très aisée! Pratique sur un petit blog, par exemple. ^^

Par contre pour des données confidentielles, l'ajax et jQuery (votre solution) est bien plus "sécurisée".

Merci de votre attention.

Les commentaires de ce billet sont fermés

Haut de page