Dans ce tuto AJAX en video, nous verrons comment réaliser un moteur de recherche en AJAX dans le style "Google Instant Search", c'est à dire que nous afficherons les résultats de la recherche directement au-dessous du champs de recherche dès que l'utilisateur tapera quelque chose sur son clavier. Pour cela nous utiliserons PHP, Jquery et une base de données MySQL.

Bon tuto!

Jetez un oeil à ces autres tuto Ajax

Notification instantanée Notification instantanée
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser…

Formulaire de contact ajaxFormulaire de contact ajax
Dans ce tuto AJAX en vidéo, vous réaliserez un formulaire…

Message à la Twitter en AJAXMessage à la Twitter en AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à réaliser un…

Détecter les requêtes AJAX en PHPDétecter les requêtes AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à détecter en…

Administration en AJAX et HTML5Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…

Formulaire de contact AJAX avec PHP et JqueryFormulaire de contact AJAX…
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire…

Espace membre en AJAXEspace membre en AJAX
Dans ce tuto Ajax en vidéo, nous verrons comment réaliser…

Notification instantanée Notification instantanée
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Ajax de 14 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



En savoir plus sur simpledev


Témoignage des clients de simpledev

Très bon formateur et surtout une incroyable diversité de tuto dans le domaine du développement de site web. J'ai commencé par les tutos concernant le html 5 et CSS3. Ces derniers proposent des sujets très utiles pour dynamiser mon site

Excellents tutos, très bien expliqués. Les tutos de Simpledev sont très utiles. L'une des choses qui fait la richesses des tutos est le "mélange des langages de programmation". On peut ainsi réaliser des systèmes complexes, avec plusieurs langages !

Bref j'ai pas besoin de préciser très bon formateur :)

Excellent Formateur, 5/5 tout y-est: application, contenu, bon son, pédagogie, bonne image, j'ai beaucoup appris en 2 jours de tuto. Parmi les quelques tutoriels que j'ai vu c'est celui qui se démarque. Simpledev. Bravo à lui j'en redemande.

Quoi dire d'autre ? merci pour tout ;).

Lire les autres témoignages

 

D'autres tuto de simpledev

Espace membre en AJAXEspace membre en AJAX
Dans ce tuto Ajax en vidéo, nous verrons comment réaliser un espace membre avec inscription,…

Administration en AJAX et HTML5Administration en AJAX et HTML5
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer et modifier des…

Installer le framework Ruby On RailsInstaller le framework Ruby On Rails
Dans ce tuto Ruby On Rails en vidéo, nous verrons comment installer le framework Ruby…

Système de vote en AJAX avec CodeigniterSystème de vote en AJAX avec Codeigniter
Dans ce tuto Codeigniter en vidéo, nous allons mettre en place un système de votes…

voir tous les tuto de simpledev

Notes attribuées par les utilisateurs (22 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (16)

par Dexyneà voté :
(a téléchargé ce tuto - 04 avril 2012)

" Bon tuto, claire et simple.

Permet de débuter simplement sous Ajax avec jQuery :). "

par mac_rlà voté :
(a téléchargé ce tuto - 13 janvier 2012)

" 5/5 "

par fred3264à voté :
(a téléchargé ce tuto - 22 décembre 2011)

" Toujours trés bien "

par discomediaà voté :
(a téléchargé ce tuto - 09 décembre 2011)

" excellent, merci "

par gekaà voté :
(a téléchargé ce tuto - 24 novembre 2011)

" excellent. merci "

par remijuniorà voté :
(a téléchargé ce tuto - 13 novembre 2011)

" 4/5 "

par abdelmoughità voté :
(a téléchargé ce tuto - 03 novembre 2011)

" merci bon tuto mais vous auriez du mettre des suggestion comme le moteur google la face "

par tebedia
(a téléchargé ce tuto - 19 juin 2011)

" gg "

par nisstal
(a téléchargé ce tuto - 24 avril 2011)

" bravo super tuto continue comme sa

merci "

par enigmae
(a téléchargé ce tuto - 23 mars 2011)

" Salut ! C'est encore moi !

Pour ceux que ça interesserent de neutraliser l'éffet de la touche entrée dans la box, voici la soluce que j'ai trouvé :

On crée une fonction JS :
function noenter() { return !(window.event && window.event.keyCode == 13); }
On l'utilise dans notre form :
<input type="text" name="search" id="search" onkeypress="return noenter()" />

Bonne soirée !
Et merci encore simpledev ;)
"

par enigmae
(a téléchargé ce tuto - 22 mars 2011)

" Salut !
Super ton tuto franchement :)

Par contre, j'aurais une ptite question concernant le imput car quand on appuie sur entrée, ça redirige vers search.php et affiche les résulats, normal.
Mais que faire si l'on veut uniquement rechercher sans appuyer sur entrée stp ?

Merci ! "

par Mousse31770
(a téléchargé ce tuto - 17 février 2011)

" Très bon tuto!

Juste une chose d'après moi, même si ce n'était pas le but principal du tuto:
Il manque pour moi l'explication de la réflexion php, si l'utilisateur écrit plusieurs mots dans la recherche. "

par simpledev
(auteur de ce tuto - 22 janvier 2011)

" Salut mitchelo34,
Déjà il faut que ton champs dans lequel tu vas faire ta recherche soit en index => FULLTEXT, ensuite pour les requêtes tu trouvera ton bonheur à cet adresse : http://dev.mysql.com/doc/refman/5.0/fr/fulltext-boolean.html , en plus c'est en Français pour une fois :)
Après navigue un peu dans ce chapitre : http://dev.mysql.com/doc/refman/5.0/fr/fulltext-search.html , tu verras c'est très intéressant et tu trouvera surement le moyen de faire la recherche exact que tu souhaite.
A+ "

par mitchelo34
(a téléchargé ce tuto - 21 janvier 2011)

" bonjour, super tuto comme d'hab, par contre je suis quand même encore à l'étape moyen en dev cette méthode de recherche me plait et je souhaite l'utiliser sur mon site mais comment faire pour que la recherche soit faite avec plusieurs mots car la on tape un mot ca marche mais des que l'on tape sur espace il ne met "plus de résultat" et dès qu'on tape deux mots il met "aucun résultat" même si les deux mots sont présent dans ma BDD.

Mon site est un site d'annonces immobilières ou les personnes mettent des annonces de biens qu'ils recherchent ensuite une personne peut consulter les annonces en recherchant par exemple "location appartement 3 pièces" et avec cette méthode il ne prend en charge que location les autres termes sont exclus, ma question que dois je mettre pour que plusieurs termes soit pris en compte et qu'on se retrouve vraiment dans un google instant like.

Voila j'espère que je suis assez clair ^^, merci "

par simpledev
(auteur de ce tuto - 08 janvier 2011)

" Si Jquery n'existait pas, j'aurai surement jamais fait d'ajax, je déteste le [removed]) Son créateur est un petit génie... "

par Yomenoà voté :
(a téléchargé ce tuto - 08 janvier 2011)

" Tuto simple et efficace.
La rapidité de mise en oeuvre grace à jQuery est juste bluffante !

Merci ! "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Ajax d’une durée de 14 minutes a été téléchargé 593 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 7 janvier 2011 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Ajax Formulaire.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !