Opis i implementacja autouzupełniania jQuery ze źródłem AJAX i appendTo

Question

Poniżej znajduje się moja próba uzyskania appendTo do pracy z autouzupełnianiem jQuery ze źródłem AJAX.

Mam wiele pytań, które, mam nadzieję, pomogą wielu osobom, które zmagają się ze zrozumieniem prawidłowego sposobu implementacji autouzupełniania i źródła AJAX.

1) source: function(request, response) {...} Co to oznacza? Dlaczego jest potrzebny.

2) W jakim formacie zwracane są dane w postaci function(data){ response($.map (data, function(obj) {? Rozumiem, że dane są w formacie JSON, ale jaki jest sens .map? Czy to konieczne? Czy są jakieś korzyści?

3a) Czy przy korzystaniu z appendTo i renderItem należy zwrócić wyżej wymienione dane success?

3b) Czy poprawnie używasz appendTo i renderItem, aby zmienić formatowanie i wyświetlanie pobranych wartości, lub, w zależności od powyższych danych?

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

To może wydawać się bardzo pomocne, ale jestem przekonany, że będzie to cenne dla wielu początkujących javascriptów i na pewno dla siebie.

Answer 1

source: function(request, response) {...} Co to oznacza? Dlaczego jest potrzebny.

Ponieważ robisz zwyczaj AJAX POST, aby uzyskać dane, należy określić funkcję, która wywołuje response zwrotnego z pożądanymi kandydatami autouzupełniania.

W najprostszym przypadku można po prostu podać ciąg znaków do parametru source, a widget wyda żądanie GET pod tym adresem URL z dołączonym ?term=(term). Ponieważ robisz POST i wysyłasz inny termin, musisz użyć wersji funkcji source.

PS: Należy dostarczyć wezwanie $.ajax z request.term zamiast $(".find_group_ac").val()

---

Jaki format ma function (data) {odpowiedź ($ mapa (dane, function (obj) { . Zwróć dane w? Zdaję sobie sprawę, dane są w formacie JSON, ale co to jest punkt .map? Czy jest to konieczne? Czy są zalety?

Widget autouzupełnianie spodziewa źródło danych tablica kto przedmioty spełniają jeden z następujących warunków:

1. Rzecz musi być pojedynczy łańcuch lub:
2. Rzecz musi być obiekt z właściwością label, A value, właściwość lub obie.

Mając to na uwadze, jeśli używasz zasobów po stronie serwera, którego JSON jest nie sformatowany w ten sposób, trzeba przekształcić dane spotkać te dane przed dostarczeniem go do funkcji response. Najczęstszym sposobem na to jest użycie $.map, która iteruje po tablicy i przekształca każdy element.

---

Podczas korzystania appendTo i renderItem, jest to konieczne, aby powrócił Powyższe dane sukces?

Nie, ale często są używane razem.

Powiedz, że masz dodatkową właściwość (np. description), którą chcesz wyświetlić na liście kandydackiej. W takim przypadku można przekształcić wynik po stronie serwera w format autouzupełniania oczekiwany (obejmujący label i value, ale nadal będzie to description), ale użytkownik chce również wyświetlić właściwość description. W takim przypadku musisz przeciążyć _renderItem.

---

Albo albo, w zależności od powyższych danych, w jaki sposób prawidłowo używać appendTo i renderItem zmienić formatowanie i wyświetlanie swoich wyszukanych wartości?

Jeśli na pytania zadane powyżej tego te są odbierane właściwie w tej odpowiedzi, wtedy wszystko powinno muszę zrobić, to pisać kod, który przynosi koncepcje razem:

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

Przykłady na jQueryUI's documentation page for autocomplete są faktycznie dość obszerne i może być pomocne. W szczególności należy sprawdzić:

• Custom data and display
• Remote JSONP data source