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.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager