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

发布于 2024-11-01 00:03:04 字数 407 浏览 5 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诠释孤独 2024-11-08 00:03:04

标准搜索将提供您需要的一切。您只需使用 $.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 >）。

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

The standard search will offer up everything you need. You just need to use a $.map() function to get the data you need out from the server response. Example:

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

Then just store the selected items (including the ids and names) in a $().data() variable on the input. Example:

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

Now when you're ready to post your value back to the server, you can simply send the id of the selected entry like so:

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

I hope that helps. Good luck!

* * EDIT * *

Sorry, the $.map() was a split thought. The data.d in my example is .NET specific, but there are two properties that are native to the Autocomplete plugin (.value and .label).

.value will be what is shown and stored if .label does not exist; otherwise, .value will be treated as the value stored in the input post-selection, and .label will be what is displayed in the dropdown.

回复收藏 0 原文