La méthode pour créer un Google Suggest avec AJAX

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Et voici une nouvelle application utilisant la technologie AJAX, vous allez tout savoir !

L’objectif est d’apprendre à créer un champ de recherche comme Google Suggest.

Pendant la saisie de l’utilisateur, le champ de saisie propose des suggestions de valeurs. Sur une page Web, le visiteur saisit le nom d’un département. Les départements sont stockés sur le serveur dans un fichier XML.
Cet application s’inspire de Google Suggest qui suggère les 10 mots-clés les plus pertinents pour une recherche.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

La méthode pour créer un Google Suggest avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Je vous montre un autre exemple qui utilise la technologie Ajax, inspiré du moteur recherche Google, Google suggère, pendant que vous allez taper votre mot, vos lettres dans un champ de type input texte, vous allez avoir des suggestions qui s’affichent en dessous, ça va interroger un fichier XML, et récupérer les informations qui correspondent à votre mot-clé, tout simplement.

Création d’un Google Suggest

On va passer à la pratique, c’est ce que je vous ai dit, pendant la saisie utilisateur, le champ de saisie propose des suggestions de valeur, et ça va être une page Web ou l’utilisateur saisie un nom de département, et en fonction, si il tape le A, on va lui proposer N allié, ect, si il tape P puis Dom comme département, au fur et à mesure des lettres qu’il tape, on réduit les suggestions, il peut même sélectionner directement une suggestion, exactement comme dans le moteur de recherche Google, les départements sont tous stockés dans un fichier XML unique et comme je vous l’ai dit, cette application s’inspire grandement de Google Suggest.

Je vais vous montrer tout de suite, j’avais écrit encore autre chose dans le PowerPoint, cet exemple illustre parfaitement l’apport du Web 2.0., du concept Ajax surtout, dans le but de faciliter l’utilisation quotidienne du Web, et surtout du confort d’utilisation pour l’internaute. Comme je vous l’ai dit, cette application comporte un fichier XML avec la liste des départements, un fichier HTML avec le champ input texte, un fichier JavaScript qui interroge le fichier XML qui récupère la liste de tous les départements, les filtres et les affiches dans un menu déroulant, il y a une feuille de style CSS qui s’occupe de la présentation de ce menu déroulant.
Je vous montre le code source, le fichier XML qui est assez grand, énorme, contient tous les départements français, voilà, Jura, Landes, Loir-et-Cher, Oise, Haute-Savoie, Seine et marne, Yvelines, etc., et vous avez de l’autre côté, le fichier HTML que vous connaissez bien, le champ input texte ici, et en fait comment ça se passe ? Comment on a mis en place Ajax ?
Dans le JavaScript, au chargement de la page, on appelle la fonction JavaScript uniqueAll, qui va … On ajoute un écouteur sur l’événement onKey, à chaque fois que l’utilisateur relache une touche, on va appeler la fonction searchSubject, je vais vous la présenter juste après, et là c’est la mise en place du contexte Ajax, là on va créer l’objet XMLHttpRequest, on récupère le fichier XML directement, on récupère tous les items, donc item c’est tous les départements, tous les départements sont récupérés, et ensuite on récupère tout ça dans un tableau, on va créer un tableau, là le tableau A département, qui est ici, on va créer un tableau avec tous les éléments récupérés du fichier XML. Là, bien évidemment, gestion du cache, searchSuggest qu’est-ce que ça fait ?
On récupère le formulaire, la valeur, là on change le style, et si l’utilisateur à bien saisi une chaîne de caractères ici, on va faire un innerHTML, on test le département, et on fait un innerHTML pour lui afficher des suggestions dans une pop-up, on écoute l’événement OnClic, si l’utilisateur clic sur un département de la pop-up, ça le complète directement ici, ça affiche la liste des départements qui correspondent à la saisie de l’utilisateur, et là, c’est quand il n’y a aucun résultat.
Par exemple si je tape W, onChange, ça correspond ici, on met la classe nameError dans le formulaire, classe nameError donc le CSS qui est là, background color, là c’est le CSS pour faire toutes les suggestions, Over lorsque l’utilisateur passe au-dessus des suggestions, lorsqu’il clique, il y a toute la mise en forme du formulaire. Si je mets Puy-de-Dôme, par exemple je passe au-dessus, je clique, voilà, tout ça c’est grâce au CSS en fait. A voilà, j’ai tout ça, je vais taper, ça réduit les possibilités, A, ça réduit les possibilités, un autre L, ça complète automatiquement parce qu’il n’y avait pas d’autres possibilités. Je tape N, O, ça réduit les possibilités parce qu’il n’y avait pas d’autres. Voilà ça re complète directement, je clique directement, le Google Suggest fait maison, ça c’est un exemple tout simple mais par exemple quand vous allez taper un nom d’utilisateur, ça va vous permettre de faire une recherche en direct, d’interroger votre base de données, et de réduire petit à petit les champs des possibilités, et vous voyez que le code reste relativement simple, parce que l’on a créé un tableau avec tous les départements.

Votre plan d’actions !

Utilisez cet exemple, inspirez-vous de cet exemple pour implémenter cette fonctionnalité dans vos sites Internet, si vous avez des questions comme d’habitude, posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Google Suggest

Et voici le code source commenté de l’application AJAX Google Suggest.

Downloads

Montrez-moi vos applications Google Suggest

Partagez, dans les commentaires, vos applications sur le type “champ de recherche” comme Google Suggest.

Créez des Applications Hyper-Intéractives avec la Formation Gratuite JavaScript Facile !