ASP.NET 中多个键/值选择的 jQuery UI 自动完成

Question

如何使用自动完成来处理多个项目的选择？我从 JSON Web 服务返回的对象包含一个 ID 和一个标签 - ID 是数据库中实体的 ID，标签是一些要显示给用户的文本。

目前，当我在自动完成下拉列表中选择一个项目时，该项目的 ID 值存储在一个隐藏字段中，并显示标签。当我删除标签时，我会清除隐藏字段的 ID - 这是通过向处理此问题的 DOM 添加一个锚元素来完成的。

现在，我想要多选。我希望能够输入一些文本，获得一个自动完成下拉菜单，选择一个项目和一些其他选项，然后能够单击“添加新”按钮或类似的按钮来选择另一个实例。

例如，我会输入一个人的姓名并获得一个自动完成的选择。我会选择一个人，然后输入他们的年龄，然后单击“添加”。此人的 id、姓名和年龄将存储在某个地方，以便我在回帖时可以在服务器端检索它。

我不太确定该怎么做？我正在考虑一个隐藏字段 - 我假设许多具有相同名称/id 的隐藏字段作为一个数组出现在服务器端，然后我可以使用它。但我还没有在 ASP.NET 中尝试过。

你是如何解决这个问题的？

Answer 1

好吧，没有建议。我最终做到了，在自动完成选择中，创建了一个风格很好的跨度。它的文本包含标签，它包含一个锚元素，我将单击事件绑定到该元素，必要时删除该元素，并且我使用 jQuery 数据 API 将 ID 值存储在跨度上。这个跨度被添加到容器 div 中，在我用来自动完成的文本框之前。我还将一个 keyup 事件绑定到文本框以检查退格 - 当它被按下并且文本字段为空时，然后我删除最后一个自动完成项。虽然它有点复杂，因为在按下 keyup 事件时，从文本框中删除的字符已经被删除，所以我也使用 jQuery API 将实际值存储在 keydown 事件中并检查keyup 事件。

表单上有一个隐藏字段，我用逗号分隔的从跨度数据中提取的 ID 值列表填充该字段。这可以在添加/删除项目时保持同步，或者仅在我回发时保持同步 - 最简单的方法是清除它并重新填充它，据我所知非常有效。

加载页面时，必须生成spans和hidden field。

希望这可以帮助其他正在寻找解决方案的人。