需要 Jquery UI 自动完成来解析对象而不是数组 [重复]

Question

我想为员工姓名附加一个 ID，因此我创建了一个对象而不是一个数组，但只使用名称而不是 ID 填充自动完成字段。 jQuery Autocomplete 源参数解析一个数组。我可以解析 object.element 吗？这是一些代码（需要更多只是问）。这可能吗？

$.ajax({
    type: 'get',
    url: 'xml/employeeList.xml',
    error: function(xhr, status, error) {alert('Could Not Retrieve Name List: '+xhr+', '+status+', '+error)},
    dataType: 'xml'
}).done(function(employees) {
    var empList = []; // array of objects
    $(employees).find('employeeList').children().each(function(index, element) {
        var $elm = $(this),
        first = $elm.find('first').text(),
        last = $elm.find('last').text(),
        lanID = $elm.find('lanID').text();
        empList.push({ // obj having label and value properties.
            value: lanID,
            label: first+' '+last
        });
    });
    console.log(empList);
    $("#tags").autocomplete({
        source: empList
    });
});

用户从自动完成中选择一个名称后，我需要将对象中具有所选名称的员工 lanID 发送回 Web 服务。在此示例中，它没有将返回的 lanID 分配为 id。 id 最终看起来像这样（ id="ui-id-345" ）。我需要 id 是这样的（id="whatever 返回的 lan id 是"）

选择名称后，它会显示 LanID 而不是名称。不是我想要的效果。我仍然希望它显示名称，但将 lanID 分配为输入或任何属性的 id。

Answer 1

jQuery ui 自动完成功能还接受具有 label 和 value 属性的对象数组。因此，如果您还想包含 id 并根据 name 搜索值，则可以将名称指定为 label 属性的值id 作为 value 属性的值。

大致如下：

$.ajax({
  type: 'get',
  url: 'xml/mockNameList.xml',
  error: function(xhr, status, error) {alert('Could Not Retrieve Name List: '+xhr+', '+status+', '+error)},
  dataType: 'XML'
}).done(function(employees) {
  var empList = []; // array of objects
  $(employees).find('employeeList').children().each(function(index, element) {
    var $elm = $(this),
    first = $elm.find('first').text(),
    last = $elm.find('last').text(),
    lanID = $elm.find('lanID').text();
    empList.push({ // obj having label and value properties.
      label: first+' '+last,
       value: lanID;
    });
  });
  $("#tags").autocomplete({
    source: empList
  });
});

如果您传递具有 label 和 value 属性的对象数组，则搜索将基于 label，即名称并且每当您选择一个项目时，传递给回调函数的第二个参数 (ui) 将包含一个 item 属性，其值是与所选项目对应的对象。所以你可以访问相关的值，在你的情况下是id，比如ui.item.value

---

旁注：

请注意您要通过以下方式实现的目标：

empList[index] = 'name: "'+first+' '+last+'",lanID: "'+lanID;

在您的代码中，empList 是一个对象，而不是一个数组。它将数据存储为键值对，而不是基于索引。以上可能会产生以下形式的对象：

{
  "0": "name:Sir foo,lanID: 007",
  "1": "name:Sir bar',lanID: 008",
}

这对于自动完成以及其他任何东西都几乎没有用，因为 name、lanID 等是字符串的一部分，您无法通过键名访问它们，相反，您必须进行字符串操作。此外，在迭代对象时无法保证顺序。