Chose promis, chose due, voici un tutorial pour faire un formulaire de recherche en Ajax avec JQuery et PHP. Idéal si vous avez envie de copier Google Instant, ce type de formulaire permet de faire gagner du temps à vos internautes. Et comme on commence à en voir un peu partout (Google, Youtube, Itunes…), il risque de devenir un standard.
Donc, comme d’habitude, j’ai préparé une démo du tutorial :
Demo
Et c’est parti pour le code. On attaque donc par le code HTML de la page. On prépare le formulaire simplement, j’ai opté pour que l’on n’affiche pas le bouton soumission du formulaire. Et on ajoute un bloc vide, celui-ci contiendra les résultats éventuels.
<!--debut du formulaire--> <form class="ajax" action="search.php" method="get"> <p> <label for="q">Rechercher un article</label> <input type="text" name="q" id="q" /> </p> </form> <!--fin du formulaire--> <!--preparation de l'affichage des resultats--> <div id="results"></div>
Ensuite le gros du code, le code JavaScript utilisant JQuery :
$(document).ready( function() { // détection de la saisie dans le champ de recherche $('#q').keyup( function(){ $field = $(this); $('#results').html(''); // on vide les resultats $('#ajax-loader').remove(); // on retire le loader // on commence à traiter à partir du 2ème caractère saisie if( $field.val().length > 1 ) { // on envoie la valeur recherché en GET au fichier de traitement $.ajax({ type : 'GET', // envoi des données en GET ou POST url : 'ajax-search.php' , // url du fichier de traitement data : 'q='+$(this).val() , // données à envoyer en GET ou POST beforeSend : function() { // traitements JS à faire AVANT l'envoi $field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action }, success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php $('#ajax-loader').remove(); // on enleve le loader $('#results').html(data); // affichage des résultats dans le bloc } }); } }); });
Et enfin le code du fichier « ajax-search.php » effectuant la recherche et le renvoi des éléments :
<?php //connexion à la base de données define('DB_NAME', 'nom_de_la_base'); define('DB_USER', 'nom_utilisateur'); define('DB_PASSWORD', 'mot_de_passe'); define('DB_HOST', 'localhost'); $link = mysql_connect( DB_HOST , DB_USER , DB_PASSWORD ); mysql_select_db( DB_NAME , $link ); //recherche des résultats dans la base de données $result = mysql_query( 'SELECT post_title , post_date , guid FROM wp_posts WHERE post_status = \'publish\' AND post_title LIKE \'' . safe( $_GET['q'] ) . '%\' LIMIT 0,20' ); // affichage d'un message "pas de résultats" if( mysql_num_rows( $result ) == 0 ) { ?> <h3 style="text-align:center; margin:10px 0;">Pas de résultats pour cette recherche</h3> <?php } else { // parcours et affichage des résultats while( $post = mysql_fetch_object( $result )) { ?> <div class="article-result"> <h3><a href="<?php echo $post->guid; ?>">< ?php echo utf8_encode( $post->post_title ); ?></a></h3> <p class="date"><?php echo $post->post_date; ?></p> <p class="url"><?php echo $post->guid; ?></p> </div> <?php } } /***** fonctions *****/ function safe($var) { $var = mysql_real_escape_string($var); $var = addcslashes($var, '%_'); $var = trim($var); $var = htmlspecialchars($var); return $var; } ?>
Voilà, c’est tout pour ce tutoriel. Après il peut encore être optimisé en ajoutant des suggestions (toujours à la Google 
). Mais on verra ça une autre fois !
Pas encore de billet sur le même sujet !
Pas mal, moi je ferais comme ceci :
function ajax(q) {
$(‘#results’).html( »);
$.get(‘ajax-search.php’,
{
q: q
},
function(data) {
$(‘#results’).html(data);
});
}
=)
@syl : On est d’accord que ça fait la même chose, mais j’ai essayé de garder le code le plus simple possible pour le tuto !
Bien sûr, dommage qu’il ait retiré certains bouts de code car ce n’est pas exactement ce que j’ai écrit. On a pas la système de balise pour les commentaires…
Maintenant j’utilise uniquement $.get et non pas $.ajax car je le trouve plus simple et puis les données ajax tu les passes forcément en GET de toute façon (il me semble).
Avec la finction Ajax on peut également envoyer les données en POST en précisant Post dans l’attribut Type.
Et avec la fonction Ajax tu peux utliser l’attribut beforeSend pour faire des actions avant l’envoi des données.
J’ai vu ça. Mais dans quel cas tu envoies les données en POST pour de l’ajax ?
Même si c’est toujours interceptable, il vaut mieux toujours envoyer en POST des données qui vont servir à modifier la base de données.
GET, comme son nom l’indique, sert à récupérer des données.
Si tu comprends l’anglais, tu peux lire ceci :
http://javascript.about.com/od/ajax/a/ajaxgp.htm
Et si on désactive javascript, plus rien ne fonctionne : dommage
Quelqu’un à une solution pour pallier à ce problème ?
Donc déjà tu peux difficilement faire de l’Ajax sans Javascript…
Après pour contourner le problème, c’est-à-dire pouvoir quand même faire des recherches (sans l’Ajax), il suffit de faire pointer le formulaire vers une page de résultats de recherche avec les données en GET (ou POST).
Ce que (soit dit en passant) je n’ai pas pris le temps de faire sur la page de démo.
Bonjour,
!
jfefe, ton commentaire est un collector! Merci
arnaud, voici un upgrade pour ressembler un peu plus à Google.
Ceci te permettra d’avoir des résultats à « tutorial ajax ».
$recherche = explode(‘ ‘, $_GET['q']);
$nombre_mots = count ($recherche);
$valeur_requete = »;
for($nombre_mots_boucle = 0; $nombre_mots_boucle < $nombre_mots; $nombre_mots_boucle++) {
$valeur_requete .= 'AND (post_status LIKE \'%' . $mots[$nombre_mots_boucle] . '%\') ';
}
$valeur_requete = ltrim($valeur_requete,'AND');
$result = mysql_query( 'SELECT post_title , post_date , guid
FROM wp_posts
WHERE post_status = \'publish\'
AND '.$valeur_requete.'
LIMIT 0,20' );
Merci mais c’était volontaire de tester juste le début de l’expression tapé. Le PHP n’est pas, pour moi, le principal, le but du tutorial reste le code JQuery.
Mais ce bout de code pourra toujours servir à ceux qui veulent aller plus loin !
@arnaud et @Ben-J : bien évidemment qu’il n’y a plus d’AJAX lorsqu’on désactive Javascript… Mais cela n’empêche pas d’avoir des pages utilisables sans JS. Dans la démo ce n’est pas le cas mais arnaud a donné un élément de réponse pour pallier au problème.
Trés bon post, je vais certainement utiliser ce code pour faire un petit whois mais je me demander comment mettre le loader dans l’input du coté droit !
Merci beaucoup !
Bonsoir,
J’ai du mal à comprendre ces lignes :
WHERE post_status = \’publish\’
AND post_title LIKE \ » . safe( $_GET['q'] ) . ‘%\
Si quelqu’un peut prendre le temps de m’expliquer
Cordialement
Il va rechercher les résultats en bdd.
WHERE post_status = \’publish\’
Le publish vient d’ou ? :s
Je début encore en PHP, désolé si ca vous semble évident
On en sait rien on connaît pas la structure ni le contenu de sa table.
Bonsoir, j’ai besoin pour mon projet de tpe de faire une page telle que celle ci pour faire une imitation d’un controle d’utilisateur en RFID, cependant j’ai codé la page et tout mais le badge RFID envoi une info avec des accents et lorsque je tape la séquence du badge dans la barre de recherche il ne le trouve pas. Comment faire pour qu’il accepte les accents ? Pour info la page est dispo à http://tpe.airlinesradio.net et tappez test dans la barre de recherche. Merci de votre collaboration !
Pour info ce que je dois taper dans la barre de recherche c’est éèàà-b’çéé.
Dans search.php mets un header indiquant l’encodage en iso.
Je vais tester comme ça, j’ai trouvé une solution c’est de mettre le champ post_title en VARBINARY sur mysql, mais si cette méthode fonction marche ça serais pas mal
Merci bien !
clap clap ! bravo
c’est très bien
Quelle version de Jquery.js faut il télécharger s’il vous plait?
merci d’avance
moi ça marche avec la 1.3.2, mais tu peux tenter sans soucis la 1.4.4
Bonjour,
Merci déjà pour le super tuto, notamment qu’il est déjà près pour wordpress
J’ai tout de même une question, je me casse la tête dessus depuis un moment, je voudrai savoir qu’est ce qu’il faut ajouter pour que la recherche soit aussi dans le corps de l’article (wp-content) et non pas que sur le titre ?
Car pour le moment quand l’on fait une recherche il ne cherche quand dans le titre, mais je souhaiterai qu’il cherche aussi dans le corps et les commentaires et l’auteur du commentaire.
Je suppose que c’est dans le fichier ajax-search.php la ligne :
//recherche des résultats dans la base de données$result = mysql_query( 'SELECT post_title , post_date , guid
FROM wp_posts
WHERE post_status = \'publish\'
AND post_title LIKE \'' . safe( $_GET['q'] ) . '%\'
LIMIT 0,20' );
Mais ne voit pas ou :s
Encore merci pour le tuto il fonctionne super ^_^
s’il vous plait j’ai un problème avec ajax .
j’ai troix combobox dans un tableau j’ai réussie a alimenter le 2éme combo a partir du 1 ére hors quand j’ai voulu alimenter le 3 ème en cliquent sur un element du 2 ème ca marche pas voial le code de la fonction appélé au niveau du 2 ème combs
function select_commune()
{
var xhr = getXhr();
// On défini ce qu’on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById(‘div3′).innerHTML = leselect;
}
}
// Ici on va voir comment faire du post ***open spécifie que le mode d’envoi doit être asynchrone.
xhr.open(« POST », »ajaxcommune.php »,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader(‘Content-Type’,'application/x-www-form-urlencoded’);
// ne pas oublier de poster les arguments
// ici, l’id de l’auteur
selcomun = document.getElementById(‘province’);
//selcomun = document.getElementById(‘region’);
Idcomun= selcomun.options[selcomun.selectedIndex].value;
xhr.send(« idcom= »+Idcomun);
}
SVP j’attend votre aide
Super le tuto ! Un grand merci.
Bonjour,
J’ai testé votre code et cela fonctionne très bien !
Je voulais savoir si on peut modifier le code de façon à ce que le résutat (partiel) s’affiche dans la zone de texte aussi comme google ?
Merci par avance.
salut a tous et à Arnaud, je suis nouveau ici ton site regorge de ressources efficace merci à toi.
j’ai une question, est-il possible de réaliser l’ajax search en html? merci!
je surf sur ton site a+ snoopy!!
Marche du tonnerre ! merci !
Bonsoir et super tuto ! très facile à mettre en place
Alors, maintenant je bloque sur une autre manip’ (jsuis newbii en ajax
…
En fait jai placé un deuxieme champ dans mon formulaire :
Et j’aimerais que lorsque que par exemple je tape « ABC » dans le champ « q » et « 13000″ dans le champ « codpost », cela m’affiche seulement les articles contenant « ABC » dans le titre et « 13000″ en code potal.
J’y arrive très bien pour un formulaire normal, mais alors avec l’Ajax, je bloque !
Je pense que cela se passe dans le script (celui en dessous du formulaire) mais je n’y arrive pas
Pourriez-vous m’aider svp
Merci d’avance
salut atarimen,
oui c’est tout à fait faisable avec jquery
tu as donc besoins de trois fichiers (hors librairies jquery)
page.html qui est le formulaire et le div du résultat
search.js et search.php
search.js contrôle tes input type text du formulaire, il envoi leur contenu à search.php qui retourne les résultats dans le div prévu à cet effet
page.html:
search.js:
var $rech = jQuery.noConflict(); //j’ai jamais compris pourquoi il faut mettre ça
$rech(document).ready( function() {
//détection de la saisie dans le champ de recherche q
$rech(‘#q’).keyup( function(){
//il faut que tu récupères le contenu de l’autre input text
var codpost = $rech(« input#codpost »).val();
$field = $rech(this);
$rech(‘#results’).html( »); // on vide les resultats
// on pourrait commencer à traiter à partir du 2ème caractère saisi
//if( $field.val().length > 0 )
//{
// on envoie la valeur recherchée en GET au fichier de traitement
$rech.ajax({
type : ‘GET’, // envoi des données en GET ou POST
url : ‘search.php’ , // url du fichier de traitement
data : ‘codpost=’+codpost+’&q=’+$rech(this).val() , // données à envoyer
success : function(data){ // traitements JS à faire APRES le retour d’ajax-search.php
$rech(‘#results’).html(data); // affichage des résultats dans le bloc
}
});
// }
});
});
et pis ton search.php: (j’utilise une classe de connection mysql)
$oDB = new mysql (SQL_HOST, SQL_LOGIN, SQL_PWD, SQL_DB);
$oDB -> connect ();
//recherche des résultats dans la base de données
$sQuery = « SELECT * FROM `articles`
where (texte like ‘% ».html_entity_decode($_GET['q']). »%’
AND codpost=’ ».$_GET['id_codpost'].’ »";
//echo $sQuery;
$requete = $oDB->query ($sQuery);
while($mag = $oDB->fetch_assoc ($requete))
{
$tab['id_article'][$i]=$mag['id_article'];
$tab['texte'][$i]=$mag['texte'];
$tab['codpost'][$i]=$mag['codpost'];
$i++;
}
//et pis tu balance ton tableau qui devrait atterrir dans le div
echo « table »;
for ($j=0;$j<sizeof($tab['id_article']);$j++) {
}
bon c’est une structure vite faite avec plein d’erreur de code bien entendu
mais l’idée est là
ensuite ce qui est plus rigolo c’est de paginer les résultats s’ils sont nombreux
on affiche donc le nombre de page, 8 résultats par page par exemple et on charge dans le div résult un nouveau div qui offre une pagination ajaxée…
j’avais eu un peu de mal à faire marcher le biniou
et en plus ma page formulaire était chargée en ajax !
si tu veux je peux te balancer les sources
@+
nico
J’ai pas encore testé (je vais essayer ca de suite) mais alors la….. MERCI BEAUCOUP NICO
+100
Réponse claire et rapide
Ps : Les petites source pour la pagination sont bien-sur les bienvenues
Petit soucis,
Il faut mettre les codes entre des balises
Sinon il ne sont pas lisibles
Merci
envoi moi un mail nlezoray at yahoo . fr
je te balancerais ça
tiens t’as une démo là: http://www.magikom.fr/index.html#produits-36
Bonjour,
Tout d’abord merci pour ce formulaire de recherche.
j’aurais aimé savoir si vous aviez des sources pour m’aider à faire un formulaire de recherche mais sur plusieurs base de données.
Ex : je cherche un candidat avec des choix précis (région, compétences, ville, nom ou prénom….)
le soucis avec ce formulaire c’est que c’est nikel pour une seule recherche mais quand je veux faire plusieurs recherche avec plusieurs champ sur plusieurs table ça se complique et je débute sur jquery…
merci de votre aide
PS : pagination
$messagesParPage=5;
$retour_total=mysql_query(‘SELECT COUNT(*) AS total FROM ……. LIKE %%’);
$donnees_total=mysql_fetch_assoc($retour_total); //On range retour sous la forme d’un tableau.
$total=$donnees_total['total']; //On récupère le total pour le placer dans la variable $total.
//Nous allons maintenant compter le nombre de pages.
$nombreDePages=ceil($total/$messagesParPage);
if(isset($_GET['page'])) // Si la variable $_GET['page'] existe…
{
$pageActuelle=intval($_GET['page']);
if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages…
{
$pageActuelle=$nombreDePages;
}
}
else // Sinon
{
$pageActuelle=1; // La page actuelle est la n°1
}
$premiereEntree=($pageActuelle-1)*$messagesParPage; // On calcul la première entrée à lire
//affichage de la pagination
if($nombreDePages != ’0′){
echo ‘Page : ‘; //Pour l’affichage, on centre la liste des pages
for($i=1; $i<=$nombreDePages; $i++) //On fait notre boucle
{
//On va faire notre condition
if($i==$pageActuelle) //Si il s'agit de la page actuelle…
{
echo ' [ '.$i.' ] ';
}
else //Sinon…
{
echo ' ‘.$i.’ ‘;
}
}
echo »;
//fin d’affichage de la pagination
Slt,
recherche du coté de INNER JOIN sur google, et après tu as juste a modifier quelques ligne dans ton script (celui qui utilise JQuery)
Je pense que c’est ca
Voila la réponse :
j’ai repris l’idée de BEn-J septembre 2010 LoooL
$recherche = explode(‘ ‘, $_GET['q']);
$nombre_mots = count ($recherche);
$valeur_requete = »;
for($nombre_mots_boucle = 0; $nombre_mots_boucle
Pas de résultats pour cette recherche
intitule_poste_offre_emploi )
$post->id_offre_emploi
}
/*****
fonctions
*****/
function safe($var)
{
$var = mysql_real_escape_string($var);
$var = addcslashes($var, ‘%_’);
$var = trim($var);
$var = htmlspecialchars($var);
return $var;
}
etc etc etc…..
et ça marche ça cherche partout dans mes champs de ma base de données.
Maintenant j’aurais une question quand je tape un mot bien sur il va m’afficher pas mal de réponse, ia t-il possibilité de fare un focus CSS et mettre les mots en couleur (ceux que l’utilisateur à taper dans sa recherche) ????
merci pour ton aide.
Alors pour ça,
Faudrais faire un truc du genre :
$result = str_replace($mot, »$mot« ,$result);
A travailer…
Désolé jai pas mis les balises,
$result = str_replace($mot,"$mot",$result);
Encore désolé les balises ne s’affiche pas comme i fo, tiens tu a le meme sujet ici :
http://www.commentcamarche.net/forum/affich-11896472-affichage-du-texte-recherche-en-gras
ouai problème de balise aussi…
J’aime bien ton lien car ZIPPEUR n’a jamais trop eu de réponse….
sinon quand je fais mon while
while( $post = mysql_fetch_object( $result )){
echo ''. utf8_encode( $post->intitule_poste_offre_emploi ) .'';
}
il faudrait que ce que je me renvoi
$post->intitule_poste_offre_emploimette en gras le mot recherchéex:
recherche du mot « travaux »
retourne « chef de projet travaux »
cela devrait mettre en gras travaux
mais je ne vois pas comment faire.
t’as une idée…?
ouais mince…
Je pense que c’est plus pertinent :
http://www.developpez.net/forums/d1156869/php/langage/syntaxe/mots-gras-resultats-recherche/
Ps : dsl je n’est pas trop le temps, si vous n’avez pas trouvé la solution ce soir, je vous enverrez des sources…
c’est gentil….
je vais essayer de voir en fait le plus dur est de trouver le bon endroit dans son code pour arriver à faire ce que l’on veut sinon, ça va j’ai commencer jquery ia 3 jours et je dis quand même merci au net et au forum et à toi pour l’aide précieuse…
jte tiens au courant demain matin
bonne soirée
Sympa comme tout ce tuto !
Seul problème, ça me semble être un peu lent !
Je sais pas si la connexion à la base à chaque recherche y est pour quelque chose.. Quelqu’un aurait un moyen d’accelèrer le traitement ?
Bonjour,
je ne sais pas ce qui se passe avec mon code rien ne marche et j’ai pas le fichier search.php; pour info, j’ai mis le code HTML et Javascript sur la même page; je ne sais plus quoi faire.
De l’aide s’il vous plait
Bonjour Jordan,
La page principale contient :
- un include jquery.js
- un include ton_script.js
- le formulaire
- un div vide (que ton_script.js va remplir en live en fonction des données saisies dans les input type text de ton formulaire)
Pour pouvoir déboguer correctement ce type de programme, il faut que tu utilises Firefox avec le plug in FireBug.
Nico
Bonjour,
Avec FireFox pas de problème par contre sous IE7 rien ne fonctionne !! (normal)
As tu une idée du pb.
D’avance merci