jQuery自动完成添加带有自动完成数据的附加数据答案

【问题标题】：jQuery autocomplete adding additional data with autocompleted datajQuery自动完成添加带有自动完成数据的附加数据
【发布时间】：2011-04-12 16:02:06
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-autocomplete

【解决方案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() 是一个分裂的想法。我的示例中的 data.d 是特定于 .NET 的，但有两个属性是 Autocomplete 插件的原生属性（.value 和 .label）。

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

【讨论】：

【解决方案2】：

使用 Jquery UI 自动完成中的选择事件来触发 javascript，它将您需要的 ID 存储在相同表单的隐藏字段中。在此处查看选择事件的文档：

http://jqueryui.com/demos/autocomplete/#event-select

【讨论】：