jquery:preenchimento automático com controle remoto xml de origem

Question

Estou tentando implementar um recurso de autocompletar caixa de texto cujos valores são gerados por um script remoto retornando conteúdo XML.Estou usando o JQuery 1.4.3 e o autocompletar widget da JQuery-UI-1.8.5.

Eu estudei o autocompletar demo de página para a Dados XML analisado, uma vez exemplo, e estou tentando implementar o comentários:

Isso também deve servir como uma referência sobre como analisar um XML remoto fonte de dados - a análise teria de acontecer para cada pedido dentro de origem-retorno de chamada.

Como um teste, eu estou tentando chegar a este trabalho com o fornecido XML demo.Comentário acima sugere que a conclusão automática 'fonte' de propriedade tem de ser substituída a chamada Ajax.Ainda assim, quando eu modificar este na função fornecida no página de demonstração, Eu não estou recebendo nenhum resultado com a seguinte função de autocompletar:

$( "#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 );
  }
});

Ainda, comentando a simples depuração mensagem pop-up mostra que a chamada Ajax não conseguem recuperar os valores utilizados na construção dos dados.Onde está o meu erro?

Bem-vindo!

Com os melhores cumprimentos,

Ron Van den Branden

Answer 1

Ok,

Eu encontrei a solução, e pode o prazer em responder-me.

Na minha tentativa original, declarei a variável 'dados' para o sucesso de retorno de chamada para a função Ajax, mas não fazer nada com ele.A solução é bastante simples:adicionar uma resposta() função que irá retornar os dados da variável, se a chamada ajax é bem-sucedida.Vou adicionar a completa correção da função (se a única alteração é na linha 14):Copie o código

$( "#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 );
   }
 });

É claro que, neste caso, a resposta pode ser construída diretamente, sem antes declarar uma variável de dados:Copie o código

     $.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()
           };
         }));
       }
     })
   }

(nota:esses função trechos trabalho quando inserido no 'XML remoto' conclusão automática de demonstração)

Ufa!Agora, para fazer algo de útil com isso.

Ron