UI Autocomplete : comment récupérer un id ?

cumunimb · 01/12/2010, 14h30

Bonjour à tous,

Je suis débutant en javascript et la solution à mon problème est certainement très très simple.
Pour implanter Autocomplete, je me suis basé sur un exemple : http://www.ycerdan.fr/tag/jquery/
Le code fonctionne bien, mais je voudrai juste retourner le champ 'id' à la place du champ 'name'.
Je pense qu'il doit peut-être falloir utiliser 'return', mais je ne sais vraiment pas comment.
(bien sûr, j'ai demandé à mon ami google de m'aider et j'ai fait une recherche sur le forum, mais après avoir consulté 14 pages je n'ai toujours pas réussi à trouver une réponse à mon niveau...)
Si vous pouvez prendre quelques minutes pour m'aider, je vous en serai très reconnaissant

Voici le code xml (test.php), le code javascript (que j'essaie d'adapter) et le code html.

Code php :

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
header ("content-type: text/xml");
echo "
<root>
  <user>
    <name>A1_name</name>
    <id>A1_id</id>
  </user>
  <user>
    <name>A2_name</name>
    <id>A2_id</id>
  </user>
  <user>
    <name>B1_name</name>
    <id>B1_id</id>
  </user>
</root>";

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
$(document).ready  // Lorsque la totalité de la page est chargée
( function() 
  { $.ajax
    ({ // Requete ajax
      type: "POST", // envoie en POST
      url: "test.php", // url cible du script PHP
      async: true, // mode asynchrone
      data: "xml", // données envoyées
      success: function(xml)  // Lorsque le PHP à renovyé une réponse
      { var elementsArray = new Array();
        $(xml).find('user').each(function()  // pour chaque "element"
        {   var nom = $(this).find('name').text();
            var id = $(this).find('id').text();
        //alert(nom);
            elementsArray.push(nom); // ajout dans le tableau à afficher
        });
        $("#example").autocomplete(elementsArray); // activation de l'autocompletion
      }
    });
  }
);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="get">
Autocompletion : <input id="example" name="exemple" type="text" />   
<input name="submit" type="submit" value="valider">
</form>

scourjean · 01/12/2010, 16h04

Et si tu suis cet exemple ça t'aide ?

http://jqueryui.com/demos/autocomplete/#xml

cumunimb · 01/12/2010, 17h17

D'abord, Merci beaucoup d'être venu à mon aide.
Effectivement cet exemple devrait logiquement pouvoir m'aider.
Je vais regarder le code de près et essayer de le comprendre suffisamment.
J'espère y arriver, je reviendrai le dire ici, dans tous les cas.
Merci encore

cumunimb · 02/12/2010, 15h22

Bonjour,

Je galère beaucoup avec l'exemple.
La 1ère difficulté, a prioiri, vient qu'il tourne avec Jquery ui et que je dois avoir un problème d'installation.
Je suis allé sur le site pour télécharger le répertoire en cochant -Core -Widget et Autocomplete. J'ai copié le répertoire dans mon espace de travail et j'ai ajouté un lien dans le script. Quand je lance le script, Firedebug indique 'Jquery is not defined' à la ligne 17 de jquery-ui-1.8.6.custom.min.js et ensuite 'Invalid label' à la ligne 18 demon script.
Pour essayer de faire tourner l'exemple, j'ai créé un fichier london.xml qui contient :

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
<root>
  <geoname>
    <countryName>A1_name</countryName>
    <geonameId>A1_id</geonameId>
  </geoname>
  <geoname>
    <countryName>A2_name</countryName>
    <geonameId>A2_id</geonameId>
  </geoname>
  <geoname>
    <countryName>B1_name</countryName>
    <geonameId>B1_id</geonameId>
  </geoname>
  <geoname>
    <countryName>C1_name</countryName>
    <geonameId>C1_id</geonameId>
  </geoname>
</root>

et j'ai recopié l'exemple ainsi :

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
<html>
  <head>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function() 
  { function log( message ) 
    { $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).attr( "scrollTop", 0 );
    }
    $.ajax
    ({url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) 
      { var data = $( "geoname", xmlResponse ).map(function() 
        { return 
          { value: $( "name", this ).text() + ", " +
            ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
        $( "#birds" ).autocomplete
        ({source: data,
          minLength: 0,
          select: function( event, ui ) 
          { log( ui.item ?
            "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
            "Nothing selected, input was " + this.value );
          }
        });
      }
    });
  }
);
</script>
<div>
  <div>
    <label for="birds">London matches: 
    </label>
    <input id="birds" />
  </div>
  <div style="margin-top:2em; font-family:Arial">Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;">
    </div>
  </div>
</div>

J'avoue que je suis incapable de savoir que faire. Si vous avez un peu d'expérience et que vous voulez bien m'aider à me débloquer, je vous en remercie par avance.
Une simple piste pour m'indiquer où chercher me serait déjà d'un grand secours.

danielhagnoul · 04/12/2010, 22h08

Bonsoir

Exemple :

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
/*
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <user>
    <name>A1_name</name>
    <id>A1_id</id>
  </user>
  <user>
    <name>A2_name</name>
    <id>A2_id</id>
  </user>
  <user>
    <name>B1_name</name>
    <id>B1_id</id>
  </user>
</root>
*/
 
var names = [];
var ids = [];
 
$.post("root.xml", function(data){
	$(data).find("user").each(function(i, item){
		$(item).children("name").each(function(j, jtem){
			// console.log(i, item, j, jtem, $(jtem).text());
			names.push($(jtem).text());
		});
 
		$(item).children("id").each(function(j, jtem){
			ids.push($(jtem).text());
		});
	});
 
	console.log(names.join());
	console.log(ids.join());
});

cumunimb · 09/12/2010, 15h34

Bonjour et merci beaucoup pour l'exemple.
J'ai l'impression que j'arrive bien a le faire tourner mais que je n'arrive peut-être pas bien à expliquer mon problème ?

Si je suppose que le code fonctionne bien c'est que :
- Si je passe 'names' à autocomplete ce sont bien les noms qui s'affichent dans le champ input (et c'est le nom sélectionné qui est envoyé à la validation du formulaire).
- Si je passe 'ids' à autocomplete ce sont les ids qui s'affichent dans le champ input (et c'est l'id sélectionné qui est envoyé à la validation du formulaire).

Le problème c'est que je voudrais que ce soit bien sur les noms que se fasse la sélection, mais que ce soit l'id correspondant au nom sélectionné qui soit envoyé.
Comme je l'ai indiqué, je suis débutant en javascript. Ne m'en voulez pas trop si la solution vous semble enfantine !

cumunimb · 15/12/2010, 18h07

Merci à ceux qui ont essayé de m'aider.
A priori je me suis trompé de forum ou bien j'ai du mal faire quelque chose puisque personne ne répond à ma demande.
Si c'est le cas, il aurait été sympa de me l'indiquer.
Bonne continuation tout de même.

01/12/2010, 16h04	#2
scourjean Membre éclairé sébastien courjean Inscription : novembre 2010 Messages : 204 Détails du profil Informations personnelles : Nom : sébastien courjean Localisation : France, Indre et Loire (Centre) Informations forums : Inscription : novembre 2010 Messages : 204 Points : 319 Points : 319	Et si tu suis cet exemple ça t'aide ? http://jqueryui.com/demos/autocomplete/#xml __________________ Sébastien Courjean Développeur Web scourjean@cyres.fr http://www.cyres.fr/
	00

01/12/2010, 17h17	#3
cumunimb Invité de passage Inscription : juin 2009 Messages : 6 Détails du profil Informations forums : Inscription : juin 2009 Messages : 6 Points : 1 Points : 1	D'abord, Merci beaucoup d'être venu à mon aide. Effectivement cet exemple devrait logiquement pouvoir m'aider. Je vais regarder le code de près et essayer de le comprendre suffisamment. J'espère y arriver, je reviendrai le dire ici, dans tous les cas. Merci encore
	00

09/12/2010, 15h34	#6
cumunimb Invité de passage Inscription : juin 2009 Messages : 6 Détails du profil Informations forums : Inscription : juin 2009 Messages : 6 Points : 1 Points : 1	Bonjour et merci beaucoup pour l'exemple. J'ai l'impression que j'arrive bien a le faire tourner mais que je n'arrive peut-être pas bien à expliquer mon problème ? Si je suppose que le code fonctionne bien c'est que : - Si je passe 'names' à autocomplete ce sont bien les noms qui s'affichent dans le champ input (et c'est le nom sélectionné* qui est envoyé à la validation du formulaire).* - Si je passe 'ids' à autocomplete ce sont les ids qui s'affichent dans le champ input (et c'est l'id sélectionné* qui est envoyé à la validation du formulaire).* Le problème c'est que je voudrais que ce soit bien sur les noms que se fasse la sélection, mais que ce soit l'id correspondant au nom sélectionné qui soit envoyé. Comme je l'ai indiqué, je suis débutant en javascript. Ne m'en voulez pas trop si la solution vous semble enfantine !
	00

15/12/2010, 18h07	#7
cumunimb Invité de passage Inscription : juin 2009 Messages : 6 Détails du profil Informations forums : Inscription : juin 2009 Messages : 6 Points : 1 Points : 1	Merci à ceux qui ont essayé de m'aider. A priori je me suis trompé de forum ou bien j'ai du mal faire quelque chose puisque personne ne répond à ma demande. Si c'est le cas, il aurait été sympa de me l'indiquer. Bonne continuation tout de même.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email