如何将任意JSON对象返回到jQuery自动完成列表？

Question

jQuery部分:

我有一个jQuery UI 1.8自动完成表单,从Rails控制器获取远程JSON数据.

$('input#test').autocomplete({
    source: function( request, response ) {
      $.getJSON(
        "<%= find_stuff_url(:format => :json) %>",
        request,
        function(data){
          console.log(data);
          function(data) {
            $.map(data, function(item) {
            return {
              "label" : item.control_point.label,
              "value" : item.control_point.geonames_uri
            }
            });
        });
    },
    minLength: 2,
    select: function( event, ui ) {
        // ...
    }
  });

...我得到的回报:

这个Rails控制器只返回一个Objects(实际上是ActiveRecord实例)数组,序列化为JSON.我想使用此数据填充自动填充列表.现在,我收到的是一系列序列化的ActiveRecord对象 - 例如,其中一个对象可能是:

Object
  control_point: Object
    geonames_uri: "http://sws.geonames.org/5128581/"
    label: "New York (US)"
    lat: "40.7142691"
    lng: "-74.0059729"
    map_id: 1
    name: "New York City"

我需要的:

但是,jQuery Autocomplete 可能需要一个携带id并label填充其列表的JSON数组对象- 但我没有这些.这是文档说的:

一个响应回调,它要求一个参数包含要向用户建议的数据.此数据可以采用上述任何格式的简单本地数据(String-Array或带有标签/值/两者属性的Object-Array).

我不太明白"String-Array或Object-Array with label/value/both"属性是什么意思.

在此示例中,我的输出将是这些control_point对象的列表,如下所示:

label: "New York (US)", value: <the geonames_uri>
label: "New York (Somewhere else)", value: <another geonames_uri>
…

我尝试使用文档中的代码进行调整$.map,但它似乎不起作用(即自动完成没有显示任何内容).

如何将任意JSON对象传递给jQuery自动完成,以便显示结果列表？更明确地说:我需要投入function(data){}什么？

Answer 1

文档(在您发布的同一链接中)解释了String-Array和Object-Array这两个术语的含义:

本地数据可以是一个简单的字符串数组,也可以包含数组中每个项目的对象,带有标签或值属性或两者.label属性显示在建议菜单中.用户从菜单中选择了某些内容后,该值将插入到input元素中.如果仅指定了一个属性,则它将用于两者,例如.如果仅提供value-properties,则该值也将用作标签.

所以在一天结束时,它是一个String-Array:["value1", "value2", ...]或一个Object-Array:

[
  { label:"First Value", value:"value1" },
  { label:"Second Value", value:"value2" },
  ...
]

您可以选择进行所需的服务器端更改以将数据序列map化为合适的,或者选择客户端,如本示例所示.无论哪种方式,最终结果应该是上述格式之一.

所以,例如,像这样的事情:

function(data) {
response( $.map(data, function(item) {
  return {
  "label" : item.control_point.label,
  "value" : item.control_point.geonames_uri
  }
}));