如何使用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]); 
     }); 
    } 
});