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

AJAX Discussion :

[AJAX] liste d'autocompletion besoin d'aide


Sujet :

AJAX

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut [AJAX] liste d'autocompletion besoin d'aide
    bonjour voila j'essaye de faire une liste deroulante qui se complete seule j'ai suivi ce tuto ci :http://dcabasson.developpez.com/arti...ion-pas-a-pas/

    mais je n'arrive pas a le faire fonctionner dans la mesure ou il n'y a aucun sugestion qui apparait
    même en copiant les sources cela ne fonctionne pas

    Merci de votre aide

  2. #2
    Expert éminent sénior

    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
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    il faudrait nous montrer ton code à toi : le HTML généré des select, les fonctions javascript concernées par le traitement Ajax ainsi que le PHP qui génère la réponse Ajax ...

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Bonjour,
    il faudrait nous montrer ton code à toi : le HTML généré des select, les fonctions javascript concernées par le traitement Ajax ainsi que le PHP qui génère la réponse Ajax ...

    A+

    merci ppour ta reponse

    ben en fait je veux juste utiliser les sources je n'ai a proprement dit pas encore fait de code je veux déjà faire marcher les sources qui sont a telecharger en bas du tuto apres j'adapterait pour mon utilisation

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    Faut t'il ajouter quelque chose de spécial pour que les sources marche
    car sur internet cela marche mais en local ca veux pas
    quelqu'un pourrai t-il tester chez lui si les sources sont fonctionnelles ?

    Merci

  5. #5
    Expert éminent sénior

    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
    Points : 36 571
    Points
    36 571
    Par défaut
    Tu as un serveur PHP ?
    Toute la partie PHP n'est pas décrite dans le tuto : tu as adapté comment ?

    Sinon, sur le principe : un tuto sert à apprendre, pas à être recopié

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  6. #6
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    oui j'ai un serveur php et la partie php est bien donnée jé bien dans la source tout les fichier
    Merci

  7. #7
    Expert éminent sénior

    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
    Points : 36 571
    Points
    36 571
    Par défaut
    Et donc "ça ne marche pas" de quelle manière ?
    Une erreur Javascript ?
    Laquelle et sur quelle ligne ?
    As-tu vérifié que l'url appelée est générée correctement ?
    Quelle est la réponse d'Ajax ?
    Que se passe-t-il si tu tapes l'url appelée via Ajax directement dans la barre d'adresse du nav ?

    Bref ... donne quelques éléments

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    Ben en fait y'a aucune erreur c'est juste que quand je rempli le champ j'ai pas de proposition

    ensuite comment ca vérifié que l'url appelée est générée correctement ?

    du coup je peut pas repondre aux autre questions

    J'ai trouvé une autre maniere de faire une liste qui s'autocmplete avec un autre site et dont celle sont tirée d'un base je te met le code car maintenant j'aimerai qu'en fonction de ce que je clique sur la premiere liste deroulante la deuxieme s'affiche avec les resultats corespondants

    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
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    <?php
    	if(isset($_POST['chef'])){
    	echo "chef 1 = ".$_POST['chef'];
     
    		header('Content-type: text/html; charset=iso-8859-1');
    		// on inclut la connexion
    		mysql_connect('localhost', 'root', '');
    		mysql_select_db('base_apli');
     
    		// on fait la requête
    		$sql = "SELECT Negociateur,Client,Id
    				FROM apli
    				WHERE Negociateur LIKE '%".$_POST['chef']."%'";
    		$req = mysql_query($sql);
     
    		$i = 0;
    		echo '<ul class="contacts">';
    		// on boucle sur tous les éléments
    		while($autoCompletion = mysql_fetch_assoc($req)){
    			echo '
    			<li class="contact"><div class="nom">'.$autoCompletion['Negociateur'].'</div>
    			<div class="prenom">
    			<span class="informal">'.$autoCompletion['Client'].'</span>
    			</div>
    			</li>';
    			// on s'arrête s’il y en a trop
    			if (++$i >= 10)
    				die('<li>...</li></ul>');
    		}
    		echo '</ul>';
    		die();
    	}
    ?>
    <!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>
    <title>Une autocompletion avancée en AJAX</title>
    <script type="text/javascript" src="lib/prototype.js"></script>
    <script type="text/javascript" src="lib/scriptaculous.js"></script>
    <script type="text/javascript" src="lib/autocompletion.js"></script>
    <style type="text/css">
    body{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align: justify;
    	font-size: 12px;
    	color: #565656;
    }
     
    img {
        border: none;
    } 
     
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    /* Autocompletion */
    .update{
    	position:absolute;
    	width:250px;
    	background-color:white;
    	border:1px solid #888;
    	margin:0px;
    	padding:0px;
    }
     
    ul.contacts  {
    	list-style-type: none;
    	margin:0px;
    	padding:0px;
    	text-align: left;
    }
    ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
    li.contact {
    	list-style-type: none;
    	display:block;
    	margin:0;
    	padding:2px;
    	height:32px;
    }
    li.contact div.image {
    	float:left;
    	width:32px;
    	height:32px;
    	margin-right:8px;
    }
    li.contact div.nom {
    	font-weight:bold;
    	font-size:12px;
    	line-height:1.2em;
    }
    </style>
    </head>
    <body>
     
    <br/>
    <form action="?" method="post" onsubmit="return false;  ">
    	<label for="chef">Chef : </label>
    	<input type="input" name="chef" id="chef" value=""  />
    	<div class="update" id="chef_update"></div>
    	<input type="hidden" name="chef_id" id="chef_id" value="" /> 
    </form>
    <br/>
     
     
     
     
     
     
     
    <?php if(isset($_POST['chef'])) {?>
    <form action="?" method="post" onsubmit="return false; ">
    	<label for="chef">Chef : </label>
    	<input type="input" name="chef" id="chef" value="" onchange="go"/>
    	<div class="update" id="chef_update"></div>
    	<input type="hidden" name="chef_id" id="chef_id" value="" /> 
    </form>
    <?php }?>
     
     
    Numéro de la personne avec son nom : <span id="chef_log"></span>
     
    <script type="text/javascript">
    new Ajax.Autocompleter ('chef',
    						'chef_update',
    						'autocompletion.php',
    						{
    							method: 'post',
    							paramName: 'chef',
    							afterUpdateElement: ac_return
    						});
    </script>
     
    </body>
    </html>

    voila ce code est fonctionnel pour la deuxieme liste intuitive je me disait qu'un onchange ferait l'affaire mais comment le faire je pense le metre au niveau du input je l'ai deja mis d'ailleurs il redirige vers une fonction go qu'il faut que je fasse ou si ta une autre soluce

    En tout cas Merci pour ton aide

  9. #9
    Expert éminent sénior

    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
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Que se passe-t-il si tu tapes l'url appelée via Ajax directement dans la barre d'adresse du nav ?
    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  10. #10
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    je te met le code du fichier .javascript car je voit pas d'url dans le code


    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
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    // retourne un objet xmlHttpRequest.
    // méthode compatible entre tous les navigateurs (IE/Firefox/Opera)
    function getXMLHTTP(){
      var xhr=null;
      if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
      else if(window.ActiveXObject){ // Internet Explorer
        try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e1) {
            xhr = null;
          }
        }
      }
      else { // XMLHttpRequest non supporté par le navigateur
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      }
      return xhr;
    }
     
    var _documentForm=null; // le formulaire contenant notre champ texte
    var _inputField=null; // le champ texte lui-même
    var _submitButton=null; // le bouton submit de notre formulaire
     
    function initAutoComplete(form,field,submit){
      _documentForm=form;
      _inputField=field;
      _submitButton=submit;
      _inputField.autocomplete="off";
      creeAutocompletionListe();
      _currentInputFieldValue=_inputField.value;
      _oldInputFieldValue=_currentInputFieldValue;
      cacheResults("",new Array())
      // Premier déclenchement de la fonction dans 200 millisecondes
      setTimeout("mainLoop()",200)
    }
     
    var _oldInputFieldValue=""; // valeur précédente du champ texte
    var _currentInputFieldValue=""; // valeur actuelle du champ texte
    var _resultCache=new Object(); // mécanisme de cache des requetes
     
    // tourne en permanence pour suggerer suite à un changement du champ texte
    function mainLoop(){
      _currentInputFieldValue = _inputField.value;
      if(_oldInputFieldValue!=_currentInputFieldValue){
        var valeur=escapeURI(_currentInputFieldValue);
        var suggestions=_resultCache[_currentInputFieldValue];
        if(suggestions){ // la réponse était encore dans le cache
          metsEnPlace(valeur,suggestions)
        }else{
          callSuggestions(valeur) // appel distant
        }
        _inputField.focus()
      }
      _oldInputFieldValue=_currentInputFieldValue;
      setTimeout("mainLoop()",200); // la fonction se redéclenchera dans 200 ms
      return true
    }
     
    // echappe les caractère spéciaux
    function escapeURI(La){
      if(encodeURIComponent) {
        return encodeURIComponent(La);
      }
      if(escape) {
        return escape(La)
      }
    }
     
    var _xmlHttp = null; //l'objet xmlHttpRequest utilisé pour contacter le serveur
    var _adresseRecherche = "options.php" //l'adresse à interroger pour trouver les suggestions
     
    function callSuggestions(valeur){
      if(_xmlHttp&&_xmlHttp.readyState!=0){
        _xmlHttp.abort()
      }
      _xmlHttp=getXMLHTTP();
      if(_xmlHttp){
        //appel à l'url distante
        _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);
        _xmlHttp.onreadystatechange=function() {
          if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) {
            var liste = traiteXmlSuggestions(_xmlHttp.responseXML)
            cacheResults(valeur,liste)
            metsEnPlace(valeur,liste)
          }
        };
        // envoi de la requete
        _xmlHttp.send(null)
      }
    }
     
    // Mecanisme de caching des réponses
    function cacheResults(debut,suggestions){
      _resultCache[debut]=suggestions
    }
     
    // Transformation XML en tableau
    function traiteXmlSuggestions(xmlDoc) {
      var options = xmlDoc.getElementsByTagName('option');
      var optionsListe = new Array();
      for (var i=0; i < options.length; ++i) {
        optionsListe.push(options[i].firstChild.data);
      }
      return optionsListe;
    }
     
    var _completeListe=null; // la liste contenant les suggestions
     
    // création d'une div pour les suggestions
    // méthode appellée à l'initialisation
    function creeAutocompletionListe(){
      _completeListe=document.createElement("UL");
      _completeListe.id="completeDiv";
      document.body.appendChild(_completeListe);
    }
     
    function metsEnPlace(valeur, liste) {
      while(_completeListe.childNodes.length>0) {
        _completeListe.removeChild(_completeListe.childNodes[0]);
      }
      for (var i=0; i < liste.length; ++i) {
        var nouveauElmt = document.createElement("LI")
        nouveauElmt.innerHTML = liste[i]
        _completeListe.appendChild(nouveauElmt)
     
      }
    }

  11. #11
    Expert éminent sénior

    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
    Points : 36 571
    Points
    36 571
    Par défaut


    Un indice : elle doit faire référence à une page "options.php" et contenir des paramètres nécessaire à ton traitement PHP ...

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  12. #12
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 13
    Points : 6
    Points
    6
    Par défaut
    a ok et ben quand je met l'url d'option.php ca m'affiche tout les mots possibles
    il n'y a pas d'erreur
    chez toi ca marche rien quand copiant les sources ?

Discussions similaires

  1. Réponses: 9
    Dernier message: 21/05/2014, 09h52
  2. [AJAX] Acces Mysql fullcalendar, besoin d'aide !
    Par rodney733 dans le forum AJAX
    Réponses: 0
    Dernier message: 15/04/2010, 10h10
  3. [script.aculo.us] Autocompletion (Ajax.autocompleter) : besoin d'aide
    Par mymy2002 dans le forum Bibliothèques & Frameworks
    Réponses: 11
    Dernier message: 22/01/2010, 17h45
  4. [AJAX] Comportement très bizarre besoin d'aide
    Par vallica dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/08/2007, 15h20
  5. [PHP-JS] Liste déroulante + Javascript + Php et Mysql : Besoin d'aide
    Par vampyrx dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 19/03/2006, 02h40

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