Comprender e implementar jQuery autocompletar con AJAX source y appendTo

Question

A continuación, mi intento de obtener appendTo para trabajar con jQuery autocompletar con fuente AJAX.

Tengo varias preguntas, que esperamos ayuden a muchas otras personas que están luchando por comprender la forma correcta de implementar la autocompleta con fuente AJAX.

1) source: function(request, response) {...} ¿Qué significa esto? Por qué es necesario

2) ¿En qué formato devuelve los datos function(data){ response($.map (data, function(obj) {? Me doy cuenta de que los datos están en formato JSON, pero ¿cuál es el objetivo de .map? ¿Es necesario hacer esto? ¿Hay beneficios?

3a) Cuando se usan appendTo y renderItem, ¿es necesario que se devuelvan los datos success antes mencionados?

3b) ¿O bien, dependiendo de los datos anteriores, cómo usa correctamente appendTo y renderItem para cambiar el formato y la visualización de los valores recuperados?

$(function() { 
$(".find_group_ac").autocomplete({ 
     minLength: 1, 
     source: function(request, response) { 
      $.ajax({ 
       url: "welcome/search/", 
       data: { term: $(".find_group_ac").val()}, 
       dataType: "json", 
       type: "POST", 
       success: function(data){ response($.map 
         (data, function(obj) { 
          return { 
          label: obj.name + ': ' + obj.description, 
          value: obj.name, 
          id: obj.name 
       };}));} 
      }); 
     } 
    }).data("autocomplete")._renderItem = function(ul, item) { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
       .appendTo(ul); 
     }; 
}); 

Esto puede parecer mucho que responder, pero estoy seguro de que será valioso para muchos novatos de Javascript y ciertamente para mí.

Answer 1

source: function(request, response) {...} ¿Qué es esto? Por qué es necesario

Puesto que usted está haciendo una costumbre AJAX POST para obtener los datos, se debe especificar una función que llama a la devolución de llamada response con los candidatos de autocompletar deseados.

En el caso de uso más simple, puede simplemente suministrar una cadena al parámetro source, y el widget emitirá una solicitud GET contra esa URL con un ?term=(term) adjunto. Como está haciendo un POST y envía un término diferente, debe usar la versión de función de source.

PS: Usted debe suministrar la llamada $.ajax con request.term en lugar de $(".find_group_ac").val()

---

¿Qué formato tiene la función (datos) {response ($ mapa (datos, la función (obj) { . devolver los datos en? Me doy cuenta de que los datos están en formato JSON, pero ¿cuál es el punto de .map? ¿Es necesario hacer esto? ¿Hay beneficios?

El widget de autocompletar espera que una fuente de datos de la matriz que está artículos cumple con uno de los siguientes requisitos:

1. el artículo debe ser una sola cadena, o:
2. El artículo debe ser un objeto con una propiedad label, una value, propiedad o ambos.

Con esto en mente, si está utilizando un recurso de servidor cuya JSON es no formato de esta manera, usted tiene que transformar los datos para cumplir con esas especificaciones antes de suministrarlo a la función response. La forma más común de hacerlo es usar $.map, que itera sobre una matriz y transforma cada elemento.

---

Al utilizar appendTo y renderItem, es necesario contar con los datos devueltos de éxito antes mencionados?

No, pero a menudo se usan juntas.

Supongamos que tiene una propiedad adicional (como description) que desea mostrar en la lista de candidatos. En este caso, puede transformar el resultado del servidor en el formato de autocompletar esperado (para incluir label y value pero aún incluir description), pero también desea mostrar la propiedad description. En este caso, deberá sobrecargar _renderItem.

---

Cualquiera o, en función de los datos anteriores, ¿cómo usar correctamente appendTo y renderItem para cambiar el formato y la visualización de los valores recuperados?

Si las preguntas formuladas por encima de este pequeños son contestadas adecuadamente en esta respuesta, entonces todo lo que debería necesitar hacer es publicar un código que trae los conceptos juntos:

$(".find_group_ac").autocomplete({ 
    minLength: 1, 
    source: function(request, response) { 
     $.ajax({ 
      url: "welcome/search/", 
      data: { term: $(".find_group_ac").val()}, 
      dataType: "json", 
      type: "POST", 
      success: function(data) { 
       response($.map(data, function(obj) { 
        return { 
         label: obj.name, 
         value: obj.name, 
         description: obj.description, 
         id: obj.name // don't really need this unless you're using it elsewhere. 
        }; 
       })); 
      } 

     }); 
    } 
}).data("autocomplete")._renderItem = function(ul, item) { 
    // Inside of _renderItem you can use any property that exists on each item that we built 
    // with $.map above */ 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "<br>" + item.description + "</a>") 
     .appendTo(ul); 
}; 

Los ejemplos de jQueryUI's documentation page for autocomplete son en realidad bastante extenso y podría ser útil. En concreto, asegúrese de revisar:

• Custom data and display
• Remote JSONP data source