Question

我有一个输入字段（文本），我想用多个名称执行自动完成。它的作用类似于Gmail中的收件人：字段，用户输入名称并点击进入并继续。问题是我有一个名单列表，这是添加到输入字段的内容，一旦你提交，据我所知，只有字段字符串被发送到服务器。问题是当有两个人姓名相同时，可能会输入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()是一个分裂的想法。我的示例中的data.d是特定于.NET的，但有两个属性是自动完成插件的原生属性（.value和.label）。

如果.value不存在，

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

Answer 2

使用Jquery UI自动完成中的select事件来触发javascript，该javascript将以相同的形式在隐藏字段中存储您需要的ID。请参阅此处的选择事件的文档：

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

jQuery自动完成功能使用自动填充数据添加其他数据

2 个答案: