Tutorial JQuery : formulaire de recherche en Ajax


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&eacute;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 !

Cette entrée a été publiée dans JQuery, PHP, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

56 reponses a Tutorial JQuery : formulaire de recherche en Ajax

  1. Syl dit :

    Pas mal, moi je ferais comme ceci :

    function ajax(q) {
    $(‘#results’).html( »);

    $.get(‘ajax-search.php’,
    {
    q: q
    },
    function(data) {
    $(‘#results’).html(data);
    });
    }

    =)

  2. arnaud dit :

    @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 !

  3. Syl dit :

    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).

  4. arnaud dit :

    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.

  5. Syl dit :

    J’ai vu ça. Mais dans quel cas tu envoies les données en POST pour de l’ajax ?

  6. arnaud dit :

    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

  7. jfefe dit :

    Et si on désactive javascript, plus rien ne fonctionne : dommage :(
    Quelqu’un à une solution pour pallier à ce problème ?

  8. arnaud dit :

    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.

  9. Ben-J dit :

    Bonjour,
    jfefe, ton commentaire est un collector! Merci ;) !

  10. Ben-J dit :

    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' );

  11. arnaud dit :

    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 !

  12. jfefe dit :

    @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.

  13. Romain dit :

    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 !

  14. Sidguia dit :

    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

  15. Syl dit :

    Il va rechercher les résultats en bdd.

  16. Sidguia dit :

    WHERE post_status = \’publish\’

    Le publish vient d’ou ? :s

    Je début encore en PHP, désolé si ca vous semble évident

  17. Syl dit :

    On en sait rien on connaît pas la structure ni le contenu de sa table.

  18. Clement dit :

    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 !

  19. Clement dit :

    Pour info ce que je dois taper dans la barre de recherche c’est éèàà-b’çéé.

  20. Syl dit :

    Dans search.php mets un header indiquant l’encodage en iso.

  21. Clement dit :

    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 !

  22. gorgor dit :

    clap clap ! bravo
    c’est très bien

  23. cyril dit :

    Quelle version de Jquery.js faut il télécharger s’il vous plait?
    merci d’avance

  24. gorgor dit :

    moi ça marche avec la 1.3.2, mais tu peux tenter sans soucis la 1.4.4

  25. lahrim dit :

    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 ^_^

  26. bettyinfo dit :

    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

  27. Limonads dit :

    Super le tuto ! Un grand merci. ;-)

  28. Motte dit :

    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.

  29. snoopy57 dit :

    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!!

  30. Sephi dit :

    Marche du tonnerre ! merci !

  31. atarimen dit :

    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

  32. gorgorbhey dit :

    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++) {

    }

  33. gorgorbhey dit :

    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

  34. atarimen dit :

    J’ai pas encore testé (je vais essayer ca de suite) mais alors la….. MERCI BEAUCOUP NICO ;)
    Réponse claire et rapide ;) +100

    Ps : Les petites source pour la pagination sont bien-sur les bienvenues ;)

  35. atarimen dit :

    Petit soucis,

    Il faut mettre les codes entre des balises ;)
    Sinon il ne sont pas lisibles :(
    Merci

  36. gorgorbhey dit :

    envoi moi un mail nlezoray at yahoo . fr
    je te balancerais ça

  37. gorgorbhey dit :
  38. Cragoroth dit :

    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

  39. econono dit :

    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 ;)

  40. Cragoroth dit :

    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.

  41. econono dit :

    Alors pour ça,
    Faudrais faire un truc du genre :

    $result = str_replace($mot, »$mot« ,$result);

    A travailer… ;)

  42. econono dit :

    Désolé jai pas mis les balises,


    $result = str_replace($mot,"$mot",$result);

  43. econono dit :

    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

  44. Cragoroth dit :

    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_emploi mette 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…?

  45. econono dit :

    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…

  46. Cragoroth dit :

    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

  47. Yo dit :

    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 ?

  48. Jordan dit :

    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

  49. gorgorbhey dit :

    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

  50. Florent dit :

    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

  51. Comp_Alim dit :

    Bonjour à tous et Grand merci pour le code super encore merci.

    Je ne suis pas un un specialiste et le code me conviens bien comme ca.

    Je voulais savoir comment faire pour le rendre plus WordPress, CAD avec
    « $wpdb-> » au lieu de :
    //connexion à la base de données
    define(‘DB_NAME’, ‘complco’);
    define(‘DB_USER’, ‘root’);
    define(‘DB_PASSWORD’, ‘Ieuflr2000′);
    define(‘DB_HOST’, ‘localhost’);

    $link = mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
    mysql_select_db( DB_NAME , $link );

    Memes si vous ne pouvez pas m’aider ce n’est pas grave merci a tous pour le tuto

  52. alex dit :

    bonjour, je reviens sur ce tuto qui m’a bien aidé.
    Je suis une bille en php ajax.
    Avec le tuto de départ, comment ajouter les résultats avec le mot recherché en surbrillance ou de couleur différente
    j ai vu plein de tuto mais je n arrive pas à l’integrer dans le model du tuto

    Merci à vous

  53. Ali dit :

    Question, comment désactiver la redirection on clique sur « entrer » ?

  54. stefde3 dit :

    Bonjour, ce script est très intéressant à la seule différence de google instant search, on ne peut recherche un résultat que sur un seul mot.

    De plus y a t-il une possibilité de fermer la div de résultat en cliquant à l’extérieur car j’ai tenté plein de script mais aucun ne fonctionne réellement.

    Le but étant de simuler un onBlur() sur une div et non à partir de l’input car si je le fait sur l’input, ça ferme bien ma div quand je clique ailleurs mais ça fait le même effet si je clique sur la dite div.

    Merci pour ton aide ou suggestions ;)

  55. info dit :

    bonjour;
    merci pour le demo, mais quand j’ai essayé d’execiter le code source que vous avez pub sa n a pas marché.
    est ce que c’est possible de mettre le code source complet pour le telecharger (SVP)?
    et merci encore une fois

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">