Une recherche avancé en ajax avec jquery

0.00 avg. rating (0% score) - 0 votes
Partager:

Qui n’a pas rêvé de pouvoir avoir une liste de suggestion à la Google sur son site ? Ce tuto est la pour ça.

Si vous êtes débrouillard, vous pourrez l’adapter facilement pour voir si un pseudo est disponible par exemple.

Dans ce tuto vous pourrez faire une recherche dans une base de donnée en ajax de deux manières:

  • On recherche une partie d’un mot, exemple: sim pourrait suggérer Simon
  • Si un mot contient un certain nombre de lettres, exemple: si on recherche les lettres S, M et I, on pourra suggérer Simon.
  • On pourrait rajouter d’autre fonction encore…

Pour cela, j’ai choisit d’utiliser l’événement keyup qui détecte l’ajout de texte dans un input. Je trouve ça bien mieux que blur qui attend la perte du focus.

Donc en gros ce code récupère le texte tapé dans l’input, regarde le type de recherche choisit et va faire une requête ajax puis afficher le résultat. Simple non ?

Pour pimenter le tout:

  • L’input change de couleur: vert si la recherche à trouvé quelque chose et rouge la recherche à échoué
  • Les parties des mot recherché sont mise en valeur.

Bien sur pour évité de surcharger le serveur pour rien, on lance la recherche avec un nombre de caractère minimum.

Ensuite qu’est ce qu’on fait quand on à trouvé un mot ? Au clique on peut l’ajouter dans l’input!!! Il faut donc pouvoir détecter ce clique et pouvoir fermer le fenêtre de suggestion quand l’input perd le focus.

Pour les effets j’utilise le magnifique plugin Velocity.js qui est ultrat cool. Je vous laisse voir.

Place au code commenté:

Afficher le code HTML
Afficher le code JS
Afficher le code PHP
Afficher le code CSS

PS: N’oubliez pas d’inclure jquery


Tous les codes sont testés et sont fonctionnels, si un de ces codes ne marche pas chez vous, merci de me le signaler.
Partager:
0.00 avg. rating (0% score) - 0 votes

Vous aimerez aussi...

Laisser un commentaire