如何使用JQueryi UI Autocomplete在JSON中實現自定義值？

Question

我使用jQuery UI自動完成插件（cached version）使用jQuery UI的1.11.1

由於我使用作爲源的JSON一些服務器端的變化，我需要適應我的代碼。

這是我的JSON的示例：

[{ 
     "name": "Varedo" 
    }, { 
     "name": "Varena" 
    }, { 
     "name": "Varenna" 
    }, { 
     "name": "Varese" 
}] 

由具有此樣式的URL產生

： [URL] /名稱=瓦爾

由於GET變量是從默認一個不同（「期限」），我已經適應我的自定義請求的代碼的建議here：

$(function() { 
    var cache = {}; 
    $("#searchTextField").autocomplete({ 
    minLength: 3, 
    source: function (request, response) { 
     var term = request.term; 

     if (term in cache) { 
      response(cache[term]); 
      return; 
     } 

     $.getJSON("[url]", { 
      name: request.term 
     }, function (data, status, xhr) { 
      cache[term] = data; 
      response(data); 
     }); 
    } 
    }); 
}); 

不過，我需要爲了適應也代碼到u選擇一個自定義的JSON值（默認爲「值」http://api.jqueryui.com/autocomplete/#option-source），在我的情況下是「名稱」（正如您可以從JSON中看到的那樣）。

我該怎麼做？

目前，這是我從自動完成獲得：

所以我想我莫名其妙地給作爲響應JS對象，而不是字符串。

在此先感謝。

Answer 1

當前您將響應保存到您的cache對象中，該對象不是jQuery UI自動完成的有效格式。您應該將數據轉換爲適合自動填充的可消化格式。

要麼你應該通過一個字符串數組，或具有標籤和值屬性的對象的陣列。

因爲響應只包含名稱的屬性，你可以將其轉換成使用jQuery map()方法字符串數組並將其保存在cache變量，如下所示：

$("#searchTextField").autocomplete({ 
    minLength: 3, 
    source: function (request, response) { 
     var term = request.term; 
     if (term in cache) { 
      response(cache[term]); 
      return; 
     } 

     $.getJSON("[url]", { 
      name: request.term 
     }, function (data, status, xhr) { 
      cache[term] = $.map(data, function (obj) { // returns array of strings 
       return obj.name 
      }); 
      // return the new array rather than original response 
      response(cache[term]); 
     }); 
    } 
});