Comprensione e implementazione del completamento automatico jQuery con sorgente AJAX e appendice

Question

Di seguito è riportato il mio tentativo di far funzionare appendTo con completamento automatico jQuery con origine AJAX.

Ho più domande, che si spera possano aiutare molti altri che stanno lottando con la comprensione del modo corretto di implementare completamento automatico e sorgente AJAX.

1) source: function(request, response) {...} Cosa fa? Perché è necessario.

2) Quale formato restituisce i dati in function(data){ response($.map (data, function(obj) {? Mi rendo conto che i dati sono in formato JSON, ma qual è il punto di .map? È necessario farlo? Ci sono benefici?

3a) Quando si utilizza appendTo e renderItem, è necessario restituire i dati success sopra menzionati?

3b) O o, in base ai dati di cui sopra, come utilizzare appendTo e renderItem per modificare la formattazione e la visualizzazione dei valori recuperati?

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

Questo potrebbe sembrare un sacco di rispondere, ma sono sicuro che sarà prezioso per molti neofiti javascript e certamente io.

Answer 1

source: function(request, response) {...} Cosa fa? Perché è necessario.

Dal momento che si sta facendo una consuetudine AJAX POST per ottenere i dati, è necessario specificare una funzione che chiama il response callback con i candidati di completamento automatico desiderati.

Nel caso di utilizzo più semplice, è sufficiente fornire una stringa al parametro source e il widget invierà una richiesta GET contro tale URL con un ?term=(term) aggiunto. Poiché stai eseguendo un POST e inviando un termine diverso, devi utilizzare la versione di funzione di source.

PS: Si dovrebbe fornire la chiamata $.ajax con request.term invece di $(".find_group_ac").val()

---

Quale formato funziona (i dati) {risposta ($ mappa (dati, la funzione (obj) { . restituire i dati in? Mi rendo conto che i dati sono in formato JSON, ma cosa è il punto di .map? È necessario fare questo? Ci sono benefici?

Il widget di completamento automatico si aspetta una fonte di dati di matrice che è elementi soddisfano uno dei seguenti requisiti:

1. La voce deve essere una singola stringa, o:
2. L'oggetto deve essere un oggetto con una proprietà label, un value, proprietà o entrambi.

Con questo in mente, se si sta utilizzando una risorsa sul lato server la cui JSON è non formattato in questo modo, è necessario trasformare i dati per soddisfare tali specifiche prima di fornire alla funzione response. Il modo comune per farlo è usare $.map, che scorre su un array e trasforma ogni elemento.

---

Quando si utilizza appendTo e renderItem, è necessario avere restituiti i dati di successo di cui sopra?

No, ma sono spesso usati insieme.

Supponiamo di avere una proprietà aggiuntiva (come description) che si desidera visualizzare nell'elenco dei candidati. In questo caso, è possibile trasformare il risultato lato server nel formato che il completamento automatico prevede (includere label e value ma includere ancora description), ma si desidera anche visualizzare la proprietà description. In questo caso, dovrai sovraccaricare lo _renderItem.

---

Uno o, a seconda dei dati di cui sopra, come si usa correttamente appendTo e renderItem modificare la formattazione e la visualizzazione dei vostri valori recuperati?

Se le domande poste sopra questo quelli sono risposto in modo adeguato a questa risposta, allora tutto ciò che dovrebbe essere necessario fare è inserire un codice che porta i concetti insieme:

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

Gli esempi su jQueryUI's documentation page for autocomplete sono in realtà abbastanza ampio e potrebbe essere utile. In particolare, essere sicuri di controllare:

• Custom data and display
• Remote JSONP data source