IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

auto completion avec Jquery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2006
    Messages : 27
    Par défaut auto completion avec Jquery
    Bonjour à tous, je m'arrache les cheveux sur un problème que je ne pensais pas trop rencontrer.

    Je suis en train de réaliser une auto completion avec Jquery, je travaille sur une BDD oracle, le principe est simple, on tape une lettre, on a alors une suggestion de nom (ou prenom, en l'occurence mais je pourrais très bien tester avec un autre champ) de coureurs, puis en tapant une 2eme on a une suggestion plus précise etc...



    voici mes sources:

    fichier recherche_coureur.html dans lequel on se sert de l'auto completion
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
     
    <form action="ajout_participation.php" method="post" enctype="multipart/form-data" >
      <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
      <script type="text/javascript">
        function recherche_completion(champ, id_block, liste_completion) {
        if(champ.value.length == 0) {
        // ne pas afficher la completion.
        document.getElementById(id_block).hide();
        }
        else {
        $.post("system/traitement_completion.php", {champ:""+champ+"", block:""+id_block+"", texte_completion:""+champ.value+"", id:""+champ.id+""}, function(data) {
        if(data.length >0) {
       document.getElementById(id_block).show();
        liste_completion.html(data);
        }
        });
        }
        } // fin recherche_completion
     
        function completer(valeur, champ, block_completion) {
        champ.val(valeur);
        setTimeout("getElementById(id_block).hide();", 200);
        }
     
      </script>
      <TABLE>
        <TR>
          <TD> Prénom:  </TD> 
          <TD> <div><input type="text"  id="prenom" name="prenom" onkeyup="recherche_completion(this,""block_prenom"", $('#liste_prenom') );" onblur="completer();" /></div>
    	<div class="block_completion" id="block_prenom" style="display: none;">
    	  <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    	  <div class="liste_completion" id="liste_prenom">
        &nbsp;
      </div>
          </div></TD>
        </TR>
        <TR>
          <TD> Nom:  </TD> 
          <TD> <div><input type="text" name="nom" id="nom" onkeyup="recherche_completion(this.value, this.id);" onblur="completer();"/> </div>
    	<div class="block_completion" id="block_nom" style="display: none;">
    	  <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    	  <div class="liste_completion" id="liste_nom">
    	    &nbsp;
    	  </div>
          </div></TD>
     
     
        </TR>
        <TR>  	
          <TD></TD><TD><input type="submit" name="submit_coureur" disabled="true"/></TD>
        </TR>
      </TABLE>
    </form>
    le fichier de traitement (PHP):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
    <?php
    session_start();
    require('fonctions.php');
    $login = $_SESSION['login'];
    $pass = $_SESSION['pass'];
    $instance = 'info';
    $conn = OuvrirConnexion($login, $pass,$instance);
     
    // si il y a un texte à compléter
    if(isset($_POST['texte_completion'])) {
      $texte_completion = strtoupper($_POST['texte_completion']);
      $id= strtoupper($_POST['id']);
      $champ = $_POST['champ'];
      $block = $_POST['block'];
      print $block;
      
      
      
      if(strlen($texte_completion) >0) {
        
        $req="SELECT ".$id." FROM tdf_coureur WHERE ".$id." LIKE '".$texte_completion."%' and rownum < 11";
        $cur = ExecuterRequete($conn,$req);
        $tab = RecupererDonnee($cur,$nbLignes);
        
        if($nbLignes > 0)
          {
     
            for ($i=0;$i<$nbLignes;$i++) {
              
              print '<li onClick="completer(\''.$tab[$i][$id].'\', '.$champ.','.$block.');">'.$tab[$i][$id].'</li>';
            }
          } 
        else
          {
            print 'Pas de résultats';
          }
      } 
      else
        {
          // on fais rien
        } 
     }
     else
       {
         print 'Erreur!';
       }
     
     
    ?>
    le CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    .block_completion {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #000000;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;
        color: #fff;
    }
     
    .liste_completion {
        margin: 0px;
        padding: 0px;
    }
     
    .liste_completion li {
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }
     
    .liste_completion li:hover {
        background-color: #f6bb19;
    }

    Je tiens à préciser que dans le fichier HTML + JS, si j'utilise directement les types HTML, j'arrive à obtenir la completion, mais ça me poste un probleme: quand j'envoie les paramètres au fichier PHP, j'ai besoin d'avoir une chaine de caractère, car PHP ne sait pas gérer les Objets HTML...


    merci d'avance pour vos réponses

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation Envoyé par surpriz Voir le message
    un problème que je ne pensais pas trop rencontrer.
    Oui, bien : tu nous a présenté le cadre.

    Mais quelle est l'erreur ?

    A+

  3. #3
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2006
    Messages : 27
    Par défaut
    le problème principal:
    le document.getElementById() ne fonctionne pas pour les <div> mais fonctionne pour les input...

    voici le code un peu plus propre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <form action="ajout_participation.php" method="post" enctype="multipart/form-data" >
      <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
      <script type="text/javascript" > 
    function recherche_completion(id_champ, id_block, liste_completion) {
        var champ = document.getElementById('prenom');
        var block = document.getElementById('block_prenom');
       alert(block.name);
        if(champ.value.length == 0) {
    	// ne pas afficher la completion.
    	block.hide();
        }
        else {
    	$.post("system/traitement_completion.php", {champ:""+id_champ+"", block:""+id_block+"", texte_completion:""+champ.value+"", id:""+champ.id+""}, function(data) {
    		if(data.length >0) {
    		    $('#block_prenom').show();
    		    liste_completion.html(data);
    		}
    	    });
        }
    } // fin recherche_completion
     
    function completer(valeur, id_champ, id_block) {
        champ = document.getElementById(id_champ);
        champ.val(valeur);
        setTimeout("document.getElementById(id_block).hide();", 200);
    } </script>
      <TABLE>
        <TR>
          <TD> Prénom:  </TD> 
          <TD> <div><input type="text"  id="prenom" name="prenom" onkeyup="recherche_completion(this.id,'block_prenom', $('#liste_prenom'));" onblur="completer();" /></div>
    	<div class="block_completion" name="block_prenom" id="block_prenom" style="display: none;">
    	  <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    	  <div class="liste_completion" id="liste_prenom">
        &nbsp;
    	  </div>
          </div></TD>
        </TR>
        <TR>
          <TD> Nom:  </TD> 
          <TD> <div><input type="text" name="nom" id="nom" onkeyup="recherche_completion(this.value, this.id);" onblur="completer();"/> </div>
    	<div class="block_completion" id="block_nom" style="display: none;">
    	  <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    	  <div class="liste_completion" id="liste_nom">
    	    &nbsp;
    	  </div>
          </div></TD>
     
     
        </TR>
        <TR>  	
          <TD></TD><TD><input type="submit" name="submit_coureur" disabled="true"/></TD>
        </TR>
      </TABLE>
    </form>
    j'ai laissé les tests pour vérifier les getElementById

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    C'est normal
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var champ = document.getElementById('prenom');
        var block = document.getElementById('block_prenom');
       alert(block.name);
        if(champ.value.length == 0) {...
    Un div n'a pas de value (à la différence des input) mais plutôt en général un innerHTML.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    +1

    De plus, il faut sortir ton passage <script> du form.
    Il doit être déplacé dans la partie <head> de la page.

    A+

  6. #6
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2006
    Messages : 27
    Par défaut
    Citation Envoyé par Bovino Voir le message
    C'est normal
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var champ = document.getElementById('prenom');
        var block = document.getElementById('block_prenom');
       alert(block.name);
        if(champ.value.length == 0) {...
    Un div n'a pas de value (à la différence des input) mais plutôt en général un innerHTML.
    non, ce getElementById fonctionne bien, de plus, ce n'est pas un div mais un input de type texte, d'ou la vérification.

    celui qui ne fonctionne pas, c'est celui la
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var block = document.getElementById('block_prenom');
    (le alert est là uniquement pour tester, et il me renvoie undifined

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Le problème vient peut-être du name, essaye avec
    par exemple.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [ZF 1.11] Auto-completion avec Zend et jQuery
    Par CinePhil dans le forum Zend_Form
    Réponses: 7
    Dernier message: 25/06/2011, 01h58
  2. [ZF 1.11] Auto-completion avec Zend_Dojo_Form_Element_FilteringSelect
    Par CinePhil dans le forum Zend_Form
    Réponses: 12
    Dernier message: 21/01/2011, 16h48
  3. [Prototype] Auto-completion
    Par Bigoodheart dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 23/04/2010, 21h54
  4. [SWINGX] auto-complet avec filtre
    Par grabriel dans le forum AWT/Swing
    Réponses: 6
    Dernier message: 16/07/2007, 15h15
  5. Auto Completion avec un JComboBox
    Par jeffciara dans le forum AWT/Swing
    Réponses: 17
    Dernier message: 19/10/2006, 08h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo