jQuery自动完成添加自动完成数据的附加数据

问题描述：

我有一个输入字段（文本），我想用多个名称执行自动完成。它的行为与Gmail中的收件人：字段类似，用户输入姓名并按回车并继续。问题是，我有一个名称列表，这是什么被添加到输入字段，并且一旦你提交，据我所知，只有字段字符串被发送到服务器。问题是有两个同名的人，所以：John Smith, Bob, John Smith可能被输入，并且该字符串将被发送到服务器。jQuery自动完成添加自动完成数据的附加数据

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

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

答

标准的搜索将提供高达你需要的一切。您只需使用$.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将显示在下拉菜单中。

答

中使用jQuery用户界面自动完成功能的选择事件来触发JavaScript的将存储你在一个隐藏字段需要在同一形式的ID。查看文档这里select事件：

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

jQuery自动完成添加自动完成数据的附加数据

相关推荐