瞭解並實現jQuery自動完成與AJAX源和appendTo

Question

以下是我的嘗試讓appendTo與jQuery自動完成與AJAX源一起使用。

我有很多問題，希望能幫助很多其他人正在努力理解用AJAX源實現自動完成的正確方法。

1）source: function(request, response) {...} 這是幹什麼的？爲什麼需要。

2）function(data){ response($.map (data, function(obj) {以什麼格式返回數據？我意識到數據是JSON格式，但是什麼是.map？是否有必要這樣做？有好處嗎？

3a）使用appendTo和renderItem時，是否需要返回上述success數據？

3b）或者，根據上述數據，您如何正確使用appendTo和renderItem來更改檢索值的格式和顯示？

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

這可能看起來很多回答，但我相信這對很多javascript新手和我自己來說都是有價值的。

Answer 1

source: function(request, response) {...}這是幹什麼的？爲什麼需要。

既然你做一個自定義的AJAX POST獲取數據，你必須指定調用response回調與所需的自動完成候選人的功能。

在最簡單的用例中，您可以爲source參數提供一個字符串，並且該小部件將針對該URL發出GET請求，並附加?term=(term)。由於您正在執行POST併發送不同的字詞，因此您必須使用source的功能版本。

PS：你應該提供$.ajax通話request.term代替$(".find_group_ac").val()

---

什麼格式做功能（數據）{響應（$圖（數據，函數（OBJ）{ 。返回數據？我意識到數據是JSON格式的，但是.map的點是什麼 ？是否有必要這樣做？有沒有好處？

自動完成部件希望誰是一個數組數據源項目符合下列條件之一：

1. 該項目必須是一個字符串，或：
2. 該項目必須與label屬性的對象，一value，財產或兩者。

考慮到這一點，如果您使用的是服務器端的資源，其JSON是不以這種方式格式化，你要轉換的數據其提供給response函數之前，以滿足這些要求。執行此操作的常見方法是使用$.map，它對數組進行迭代並轉換每個元素。

---

當使用appendTo和renderItem，是有必要具有上述成功返回的數據？

不，但它們經常一起使用。

假設您有一個額外的房產（如description），您希望顯示在候選人列表中。在這種情況下，您可能會將服務器端結果轉換爲自動完成期望的格式（包括label和value，但仍包含description），但您也想要顯示description屬性。在這種情況下，您需要重載_renderItem。

---

或，根據以上數據，你如何正確使用appendTo和renderItem改變你的檢索值的格式和顯示？

如果超過這個的人問的問題都在這個答案充分的回答，那麼我應該需要做的是發佈一些代碼，所帶來的概念放在一起：

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

上jQueryUI's documentation page for autocomplete的例子實際上是相當廣泛，可能會有所幫助。具體而言，一定要檢查出：

• Custom data and display
• Remote JSONP data source