2011-04-12 105 views
1

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

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

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

回答

4

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