Hiểu và triển khai thực hiện tự động hoàn thành jQuery với nguồn AJAX và appendTo

Question

Dưới đây là nỗ lực của tôi khi nhận được appendTo để làm việc với jQuery autocomplete với nguồn AJAX.

Tôi có nhiều câu hỏi, hy vọng sẽ giúp nhiều người khác đang đấu tranh với việc hiểu đúng cách để triển khai tự động hoàn thành với nguồn AJAX.

1) source: function(request, response) {...} Điều này làm gì? Tại sao nó là cần thiết.

2) Định dạng nào function(data){ response($.map (data, function(obj) { trả về dữ liệu? Tôi nhận ra dữ liệu ở định dạng JSON, nhưng quan điểm của .map là gì? Có cần thiết để làm điều này? Có lợi ích gì không?

3a) Khi sử dụng appendTo và renderItem, bạn có cần phải trả lại dữ liệu success được đề cập ở trên không?

3b) Hoặc là, tùy thuộc vào dữ liệu ở trên, bạn sử dụng đúng cách appendTo và renderItem để thay đổi định dạng và hiển thị các giá trị đã truy xuất của bạn như thế nào?

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

Điều này có vẻ như rất nhiều câu trả lời, nhưng tôi chắc chắn nó sẽ có giá trị đối với nhiều người mới sử dụng javascript và chắc chắn là bản thân mình.

Answer 1

source: function(request, response) {...} Điều này làm gì? Tại sao nó là cần thiết.

Vì bạn đang thực hiện một AJAX POST tùy chỉnh để lấy dữ liệu, bạn phải chỉ định một hàm gọi lại số gọi response với các ứng cử viên tự động hoàn thành mong muốn.

Trong trường hợp sử dụng đơn giản nhất, bạn chỉ có thể cung cấp một chuỗi cho thông số source và tiện ích sẽ đưa ra yêu cầu GET đối với URL đó với phụ đề ?term=(term). Vì bạn đang thực hiện POST và gửi một thuật ngữ khác, bạn phải sử dụng phiên bản chức năng của source.

PS: Bạn nên cung cấp các $.ajax cuộc gọi với request.term thay vì $(".find_group_ac").val()

---

định dạng gì function (data) {phản ứng ($ bản đồ (dữ liệu, chức năng (obj) { . Tôi nhận ra dữ liệu ở định dạng JSON, nhưng điều gì là điểm .map? Có cần thiết phải làm điều này không? Có lợi ích không?

Các widget autocomplete hy vọng một nguồn dữ liệu mảng người là mục đáp ứng một trong các yêu cầu sau:

1. Mục phải là một chuỗi duy nhất, hoặc:
2. Các mục phải là một đối tượng với một tài sản label, một value, thuộc tính hoặc cả hai.

Với điều này trong tâm trí, nếu bạn đang sử dụng một nguồn tài nguyên server-side mà JSON là không định dạng theo cách này, bạn phải chuyển đổi dữ liệu để đáp ứng những thông số kỹ thuật trước khi cung cấp nó vào response chức năng. Cách phổ biến để làm điều này là sử dụng $.map, lặp lại trên một mảng và biến đổi từng phần tử.

---

Khi sử dụng appendTo và renderItem, nó là cần thiết để có dữ liệu thành công nêu trên trả lại?

Không, nhưng chúng thường được sử dụng cùng nhau.

Giả sử bạn có một thuộc tính bổ sung (như description) mà bạn muốn hiển thị trong danh sách ứng cử viên. Trong trường hợp này, bạn có thể chuyển đổi kết quả phía máy chủ thành định dạng tự động hoàn thành mong muốn (bao gồm label và value nhưng vẫn bao gồm description), nhưng bạn cũng muốn hiển thị thuộc tính description. Trong trường hợp này, bạn sẽ cần phải quá tải _renderItem.

---

Hoặc hay, tùy thuộc vào các dữ liệu trên, làm thế nào để bạn sử dụng một cách chính xác appendTo và renderItem để thay đổi định dạng và hiển thị các giá trị lấy của bạn?

Nếu những câu hỏi trên người này được trả lời đầy đủ trong câu trả lời này, sau đó tất cả nên tôi cần phải làm là gửi một số mã đó sẽ đem lại các khái niệm với nhau:

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

Các ví dụ trên jQueryUI's documentation page for autocomplete thực sự khá rộng và có thể hữu ích. Cụ thể, hãy chắc chắn kiểm tra:

• Custom data and display
• Remote JSONP data source