jQuery 自动完成通过自动完成数据添加附加数据

Question

我有一个输入字段(文本)，我想对多个名称执行自动完成。它的作用类似于 Gmail 中的“收件人:”字段，用户输入名称并按 Enter 并继续。问题是我有一个名称列表，这就是添加到输入字段中的内容，据我所知，一旦提交，只有字段字符串会发送到服务器。问题是当有两个人同名时，因此:John Smith, Bob, John Smith 可能会被输入，并且该字符串将被发送到服务器。

在后端，所有用户都有一个唯一的 ID。有什么办法可以让用户的名字成为自动完成源，但将他们的 ID 发送到服务器吗？

我正在使用 jQuery 1.5.1 和这个插件:jQuery UI Autocomplete

Answer 1

标准搜索将提供您需要的一切。您只需使用 $.map() 函数即可从服务器响应中获取所需的数据。示例:

...
success: function (data) {
   response($.map(data.d, function (item) {
      return {
         id: item.ContactId,
         value: item.LastName + ", " + item.FirstName
      }
   }))
}
...

然后将所选项目(包括 ID 和名称)存储在输入的 $().data() 变量中。示例:

...
select: function (event, ui) {
   $(this).data("Selected", item);
}
...

现在，当您准备好将值发回服务器时，您只需发送所选条目的 ID，如下所示:

var idToSend = $("#autoComplete").data("Selected").id;

我希望这会有所帮助。祝你好运!

* * 编辑 * *

抱歉，$.map() 是一个 split 的想法。我的示例中的 data.d 是 .NET 特定的，但有两个属性是自动完成插件的 native 属性(.value 和 .label >).

如果 .label 不存在，则

.value 将显示并存储；否则，.value 将被视为存储在输入后选择中的值，而 .label 将是下拉列表中显示的值。