jQuery UI autocompletar con JSON desde la URL

Question

Estoy usando la función de autocompletado de la interfaz de usuario jQuery. Puedo hacer que funcione con el ejemplo proporcionado con la interfaz de usuario jQuery de esta manera:

var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 

$("#tags").autocomplete({ 
    source: availableTags 
}); 

Esto funciona sin ningún problema. Pero necesito usar JSON como mi fuente de datos que pueden ser recuperados de esta manera: http://mysite.local/services/suggest.ashx?query=ball

Si voy a esa URL consigo JSON como esto:

[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}] 

¿Cómo puedo usar mi URL como la fuente de datos?

He intentado cambiar la opción de fuente de la siguiente manera:

$("#tags").autocomplete({ 
    source: "http://mysite.local/services/suggest.ashx" 
}); 

Pero no ayuda. Supongo que el servicio no sabe qué palabra clave se ha escrito en el campo de entrada, más o menos.

Cualquier puntero sería genial.

Answer 1

Necesita cambiar su fuente para cumplir con las siguientes especificaciones (descritas en el documentation para el widget). La fuente debe ser una matriz que contiene (o devolver una matriz que contiene):

• cadenas simples, o:
• objetos que contienen una propiedad label, una propiedad value, o ambas.

Si por algún motivo no puede cambiar el origen de su fuente remota, puede transformar los datos una vez que se hayan recuperado correctamente. He aquí cómo se haría eso:

$("#tags").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://mysite.local/services/suggest.ashx", 
      data: { query: request.term }, 
      success: function (data) { 
       var transformed = $.map(data, function (el) { 
        return { 
         label: el.phrase, 
         id: el.id 
        }; 
       }); 
       response(transformed); 
      }, 
      error: function() { 
       response([]); 
      } 
     }); 
    }); 
}); 

Como se puede ver, usted necesita para tomar la llamada AJAX a sí mismo mediante introducción de una función a la opción source del widget.

La idea es usar $.map para transformar su matriz en una matriz que contiene elementos que el widget de autocompletar puede analizar.

Observe también que el parámetro data pasado a la llamada AJAX debe terminar como ?query=<term> cuando el usuario escribe un término.