Partage
  • Partager sur Facebook
  • Partager sur Twitter

Suggestions dans un champs texte

Comme Google Suggest

Sujet résolu
jalol
    3 mars 2006 à 9:53:38

    Salut à tous !

    Voilà, je cherche à développer une aide à la saisie dans un champs de formulaire à la manière de Google Suggest. Bon, je compte utiliser AJAX bien sûr, accompagné de PHP/MySQL pour le traitement serveur. J'ai à peu près compris le fonctionnement d'AJAX, et notamment l'objet XMLHttpRequest.

    Ce que j'aimerais savoir faire, c'est les suggestions côté client, car je m'y connais très peu en javascript. Je vais devoir utiliser DOM, mais j'aimerais comprendre comment faire en sorte que lorsqu'on passe par-dessus une suggestion cela la mette en surbrillance et l'insère dans le champs texte, comme chez Google Suggest. Quelqu'un pourrait m'aider svp? :)
    • Partager sur Facebook
    • Partager sur Twitter
    jalol
      4 mars 2006 à 12:21:36

      Bon, j'ai réussi à faire à peu près ce que je voulais... ^^
      Vous pouvez voir le résultat en cliquant ici

      Voici les différents codes :
      function suggest() {
        // On instancie l'objet XMLHttpRequest
        var xhr_object = null;
        if(window.XMLHttpRequest) { // Firefox
          xhr_object = new XMLHttpRequest();
        }
        else if(window.ActiveXObject) { // Internet Explorer
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else { // XMLHttpRequest non supporté par le navigateur
          alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
          return;
        }
       
        var filename   = "suggest_process.php";
        var divSuggest = document.getElementById('suggest');
       
        // On récupère la valeur saisie dans le champs texte
        var saisie  = document.getElementById('parrain').value;
        var data    = null;
        if (saisie != '') { // On vérifie qu'il y a bien quelque chose dans le champs texte
          data = 'parrain='+saisie;
        } else {
          divSuggest.style.visibility = 'hidden';
              return;
        }
       
        // On spécifie la méthode de transmission des données‚ l'URL et le mode de transmission de la requête ;
        // Le 3ème argument (true) détermine si on se met en mode asynchrone ou non
        xhr_object.open ('POST'‚ filename‚ true);
       
        // On détermine ce qui doit se passer lorsque les données ont été transmises
        xhr_object.onreadystatechange = function() {
          if (xhr_object.readyState == 4) { // Si les données ont été transmises
                //var XML = xhr_object.responseXML;
                var txt = xhr_object.responseText
                divSuggest.style.visibility = 'visible';
                divSuggest.innerHTML = txt;
                // Mettre ce qu'on doit faire avec ça
              }
        }
       
        // On définit les entêtes d'envoi POST
        xhr_object.setRequestHeader("Content–type"‚ "application/x–www–form–urlencoded");
        // On envoie les données
        xhr_object.send (data);
      }

      function cacher(idDiv‚ input) {
        var div = document.getElementById(idDiv);
        //alert (suggestOver);
        if (!suggestOver) {
          div.style.visibility = 'hidden';
        }
        return;
      }

      function setContent(content‚ idInput) {
        var input   = document.getElementById(idInput);
        input.value = content;
        input.focus();
        return;
      }


      <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http–equiv="Content–Type" content="text/html; charset=utf–8" />
      <title>Test AJAX Suggest</title>
      <link href="suggest.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="suggest.js"></script>
      </head>

      <body>
      <form id="form" method="post" action="">
        <p><strong>Entrer un nom :</strong><br />
        </p>
        <p>
          <input name="parrain" type="text" id="parrain" size="40" onkeydown="setTimeout(suggest‚350)" onclick="setTimeout(suggest‚350)" onblur="cacher('suggest'‚ this)" />
        </p>
        <div id="suggest" onmouseover="suggestOver=true;" onmouseout="suggestOver=false">&nbsp;</div>
      </form>
      </body>
      </html>


      #suggest {
              font–family: Arial‚ Helvetica‚ sans–serif;
              font–size: 10px;
              background–color: #FFCC99;
              width: 264px;
              border: 1px solid #0099FF;
              visibility: hidden;
              z–index: 50;
      }
      body {
              font–family: Arial‚ Helvetica‚ sans–serif;
              font–size: 12px;
      }
      #form p {
              margin: 0px;
      }
      #form #suggest li {
              margin: 0px;
              list–style–type: none;
              padding–top: 5px;
              padding–right: 0px;
              padding–bottom: 5px;
              padding–left: 0px;
      }
      #form #suggest li:hover {
              margin: 0px;
              list–style–type: none;
              padding–top: 5px;
              padding–right: 0px;
              padding–bottom: 5px;
              padding–left: 0px;
              background–color: #0099FF;
              color:#FFFFFF;
              font–family: Arial‚ Helvetica‚ sans–serif;
              text–decoration: none;
              width: 264px;
      }
      #form #suggest ul {
              margin: 0px;
              padding: 0px;
      }
      #form #suggest a:link {
              font–family: Arial‚ Helvetica‚ sans–serif;
              font–size: 10px;
              color: #000066;
              text–decoration: none;
              padding–top: 5px;
              padding–bottom: 5px;
              width: 264px;
      }
      #form #suggest a:visited {
              font–family: Arial‚ Helvetica‚ sans–serif;
              font–size: 10px;
              color: #0099FF;
              text–decoration: none;
              padding–top: 5px;
              padding–bottom: 5px;
              width: 264px;
      }
      #form #suggest a:hover {
              font–family: Arial‚ Helvetica‚ sans–serif;
              font–size: 10px;
              color: #FFFFFF;
              background–color: #0099FF;
              text–decoration: none;
              padding–top: 5px;
              padding–bottom: 5px;
              width: 264px;
      }


      <?php
      $mysqli = new mysqli ('localhost'‚ '*****'‚ '*****'‚ 'ff_baseo');
      $retour = $mysqli–>query ("SELECT nom_client‚ idClient FROM baseo_clients WHERE nom_client LIKE '".stripslashes ($_POST['parrain'])."%' ORDER BY nom_client LIMIT 0‚10") or die ($mysqli–>error);

      if ($retour–>num_rows == 0) {
        echo utf8_encode ('<p>Aucune suggestion...</p>');
      } else {
        echo '<ul>';
        while ($donnees = $retour–>fetch_row()) {
          echo '  <li><a href="javascript:setContent(\''.addslashes($donnees[0]) . ' ('.addslashes($donnees[1]).')\'‚\'parrain\'‚\'suggest\');">'.$donnees[0] . ' ('.$donnees[1].')' . "</a></li>\n";
        }
        echo '</ul'>
      }
      $mysqli–>close();
      ?>
      • Partager sur Facebook
      • Partager sur Twitter

      Suggestions dans un champs texte

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown