jquery: saisie semi-automatique avec la source XML à distance

Question

Je suis en train de mettre en œuvre une zone de texte de saisie semi-automatique dont les valeurs sont générées par un contenu XML retour script distant. J'utilise JQuery-1.4.3 et le widget de saisie semi-automatique JQuery-UI-1.8.5.

J'ai étudié la page de démonstration de saisie semi-automatique pour le données XML analysées une fois par exemple , et je essaie de mettre en œuvre les commentaires:

  

Cela devrait aussi servir de référence sur la façon d'analyser un XML distant source de données -. L'analyse syntaxique serait le fruit du hasard pour chaque demande dans la source de rappel

En tant que test, je suis en train de faire ce travail avec la démo XML fourni. commentaire ci-dessus suggère que la propriété autocomplete « source » doit être remplacé par l'appel Ajax. Pourtant, quand je modifie cela dans la fonction fournie au démo , je ne suis pas obtenir des résultats avec la fonction de saisie semi-automatique suivant:

$( "#birds" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
//alert($('name', this).text());
          return {
            value: $( "name", this ).text() + ", " +
                   ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
      }
    })
  },
  minLength: 0,
  select: function( event, ui ) {
    log( ui.item ?
         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
         "Nothing selected, input was " + this.value );
  }
});

Pourtant, en commentant le message pop-up simples de débogage montre que l'appel Ajax réussit à récupérer les valeurs utilisées dans la construction des données. Où est mon erreur?

Toute aide appréciée!

Cordialement,

Ron Van den Branden

Answer 1

Ok,

J'ai trouvé la solution, et peut volontiers répondre moi-même.

Dans ma première tentative, je déclare la variable « données » dans le rappel de succès pour la fonction Ajax, mais n'a rien fait avec elle. La solution est assez simple: ajouter une fonction de réponse () qui retourne la variable de données si l'appel ajax est réussi. Je vais ajouter la fonction corrigée complète (bien que le seul changement est la ligne 14): Copiez le code

$( "#birds" ).autocomplete({
   source: function(request, response) {
     $.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()
           };
         });
       response(data);
       }
     })
   },
   minLength: 0,
   select: function( event, ui ) {
     log( ui.item ?
       "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
       "Nothing selected, input was " + this.value );
   }
 });

Bien sûr, dans ce cas, la réponse peut être construite directement, sans avoir d'abord déclarer une variable de données: Copiez le code

     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         response($( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }));
       }
     })
   }

(note: ce travail de fonction lors de son insertion dans le 'XML à distance' autocomplete démo )

Ouf! Passons maintenant à faire quelque chose d'utile avec cela.

Ron