JQuery-ui 响应中带有 id 和值的自动完成功能,但如何在自动完成文本框中显示值,在隐藏框文本中显示 id

JQuery-ui autocomplete feature with id and value in response, but how to display value in autocomplete text box and id in hiddenbox text

我收到 Spring 以下格式的 JPA 响应

[
    [12, "companyReferenceNumber1"],
    [13, "companyReferenceNumber2"],
    [14, "companyReferenceNumber3"],
    [15, "companyReferenceNumber4"],
    [16, "companyReferenceNumber5"],
    [17, "companyReferenceNumber6"],
    [18, "companyReferenceNumber7"],
    [19, "companyReferenceNumber8"],
    [20, "companyReferenceNumber9"],
    [21, "companyReferenceNumber10"]
]

并达到 ajax -> 成功 -> data 参数 现在我只想在自动完成文本框中显示值并隐藏键。尝试了所有方法,但我可能在某处遗漏了一些小东西。稍微看一下我的代码并提供帮助将非常有帮助。卡住了 4 天了。

//Adding JQuery code

$("#employeeId").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/searchEmployeeId",
      data: {
        term: request.term
      },
      success: function(data) {
        response($.map(data, function(item) {
          return {
            label: item.name,
            value: item.name
          };
        }));
      }
    });
  },
  select: function(event, ui) { //Error here : ReferenceError: item is not defined
    $("#employeeId").val(ui.item[1]);
    $("#empId").val(ui.item[0]);
    alert(ui.item + "d");
    return false;
  },
  change: function(event, ui) {
    $("#employeeId").val(ui.item ? ui.item.value : 0);
  },
  minLength: 2
});

不知何故它开始工作了。下面是解决方案。有更新会继续更新的

$("#employeeId").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/searchEmployeeId",
      data: {
        term: request.term
      },
      success: function(data) {
        response($.map(data, function(item) {
          return {
            label: item[1],
            value: item[0]
          };
        }));
      }
    });
  },
  select: function(event, ui) {
    $("#employeeId").val(ui.item.label);
    $("#empId").val(ui.item.value);
    return false;
  },
  focus: function(event, ui) {
    $("#employeeId").val(ui.item.label);
    return false;
  },
  change: function(event, ui) {
    $("#employeeId").val(ui.item ? ui.item.label : 0);
  },
  minLength: 2
});
$("#employeeId").autocomplete("option", "appendTo", ".eventInsForm");