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

Question

jQuery部分:

我有一个 jQuery UI 1.8 自动完成表单，可以从 Rails Controller 获取远程 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 Controller 只返回序列化为 JSON 的 Objects 数组(实际上是 ActiveRecord 实例)。我想使用这些数据来填充自动完成列表。现在，我收到的是一系列序列化的 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 数组来填充它的列表——但我没有有这些。这是 what the documentation says :

A response callback, which expects a single argument to contain the data to suggest to the user. This data […] can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties).

我不太明白“具有标签/值/两者的字符串数组或对象数组”属性是什么意思。

在此示例中，我的输出将是那些 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

文档(在您发布的同一链接中)解释了术语字符串数组和对象数组的含义:

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

所以在一天结束时，它要么是一个字符串数组:["value1", "value2", ...] 要么是一个对象数组:

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

您可以选择进行所需的服务器端更改以序列化数据以使其看起来合适，或者将其映射到客户端，如this example中所示。 .无论哪种方式，最终结果都应该是上述格式之一。

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

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