如何用ResultSet的两个字段创建JSON数组？Autocomplete数据源生成报错

我来帮你捋清楚这个问题！jQuery UI Autocomplete对对象数组的数据源支持其实很友好，你遇到的报错和输出不符的情况，大概率是没正确配置它的核心选项，或者处理额外字段时逻辑出了问题。下面一步步给你解决思路和代码示例：

1. 先搞对对象数组的基础结构 #

Autocomplete默认要求每个数组项是包含label（下拉列表显示的文本）和value（选中后填充到输入框的值）的对象，额外字段（比如ID、分类、描述）可以随便加，不会影响核心功能。举个标准的例子：

// 你的对象类型ArrayList（JavaScript里就是数组）
var autocompleteData = [
  { label: "苹果", value: "apple", id: 1, category: "水果" },
  { label: "香蕉", value: "banana", id: 2, category: "水果" },
  { label: "胡萝卜", value: "carrot", id: 3, category: "蔬菜" }
];

2. 正确初始化Autocomplete并处理额外字段 #

如果直接用上面的数组当数据源，初始化时只要指定source，然后在select或focus事件里就能拿到完整的对象（包括额外字段）：

$("#your-input-id").autocomplete({
  source: autocompleteData,
  // 选中选项时触发的事件，这里可以处理额外字段
  select: function(event, ui) {
    // ui.item就是你数组里的那个完整对象，直接访问额外属性
    console.log("选中的ID：", ui.item.id);
    console.log("所属分类：", ui.item.category);
    
    // 如果你不想用默认的value填充输入框，可以阻止默认行为后自定义
    // event.preventDefault();
    // $(this).val(ui.item.label); // 比如填充label而不是value
  },
  // 聚焦到选项时的自定义逻辑（可选）
  focus: function(event, ui) {
    // 阻止默认的输入框自动替换行为，保持输入框内容不变
    // event.preventDefault();
  }
});

3. 常见错误原因及修复 #

错误1：报错“Cannot read property 'label' of undefined” #

这说明你的对象里没有label或value字段，Autocomplete默认会找这两个属性。如果你的数组字段名不是label/value（比如是name/code），可以通过source的回调函数转换格式：

$("#your-input-id").autocomplete({
  source: function(request, response) {
    // 先根据输入的关键词过滤数据
    var filteredItems = autocompleteData.filter(function(item) {
      return item.name.toLowerCase().includes(request.term.toLowerCase());
    });
    // 转换成Autocomplete需要的格式，同时保留额外字段
    response(filteredItems.map(function(item) {
      return {
        label: item.name, // 映射为下拉显示的label
        value: item.code, // 映射为输入框的value
        id: item.id,
        desc: item.description
      };
    }));
  }
});

错误2：选中后无法获取额外字段 #

别试图通过数组索引去取额外数据！因为Autocomplete会根据输入关键词过滤数组，索引已经不是原数组的索引了。一定要在select事件里用ui.item.你的字段名来访问，比如ui.item.id，这才是当前选中的完整对象。

4. 自定义下拉列表的显示（可选） #

如果想在下拉项里展示额外字段（比如分类），可以重写_renderItem方法来自定义渲染：

$("#your-input-id").autocomplete({
  source: autocompleteData
}).data("ui-autocomplete")._renderItem = function(ul, item) {
  // 自定义每个下拉项的HTML，把分类也显示出来
  return $("<li>")
    .append(`<div>${item.label} <span style="color:#999; font-size:0.8em; margin-left:10px;">(${item.category})</span></div>`)
    .appendTo(ul);
};

按照这个思路来，你应该就能解决报错，并且得到符合预期的输出了。

内容的提问来源于stack exchange，提问作者Raky