ASP.NET 中用于多个键/值选择的 jQuery UI 自动完成
如何使用自动完成功能处理多个项目的选择？我从 JSON Web 服务返回的对象包含一个 ID 和一个标签 - ID 是数据库中实体的 ID，标签是要向用户显示的一些文本。
目前，当我在自动完成下拉列表中选择一个项目时，该项目 ID 的值将存储在隐藏字段中，并显示标签。当我删除标签时，我会清除隐藏字段的 ID - 这是通过向处理此问题的 DOM 添加锚元素来完成的。
现在，我想要有多个选择。我希望能够输入一些文本，获得自动完成下拉列表，选择一个项目和一些其他选项，然后能够单击“添加新”按钮或类似的按钮来选择另一个实例。
例如，我输入一个人的名字并获得自动完成选择。我会选择一个人，然后输入他们的年龄，然后单击“添加”。该人的 ID、姓名和年龄将存储在某处，以便我回发时可以在服务器端检索它。
我不太确定该怎么做？我正在考虑一个隐藏字段 - 我假设许多具有相同名称/id 的隐藏字段作为数组出现在服务器端，然后我可以使用它。但我还没有在 ASP.NET 中尝试过这个。
你是怎么解决这个问题的？
How do I handle selection of multiple items with autocomplete? The objects I return from my JSON web service contain an ID and a Label - the ID is the ID of the entity in the database, and the Label is some text to display for the user.
At the moment, when I select an item in the autocomplete dropdown, the value of the item's ID is stored in a hidden field, and the label is displayed. When I remove the label, I clear the ID of the hidden field - this is done by adding an anchor element to the DOM that handles this.
Now, I want to have multiple selections. I want to be able to enter some text, get an autocomplete dropdown, select an item and some other options, then be able to click an 'Add New' button or the likes to be able to select another instance.
For example, I'd type in a person's name and get an autocomplete selection. I'd select a person, and then enter their age, and click 'Add'. The person's id, name, and age will be stored somewhere so that I can retrieve it on the server side when I post back.
I'm not quite sure how to do it? I'm thinking of a hidden field - I assume that many hidden fields of the same name/id turn up on the server side as an array, which I can then use. But I haven't tried this yet in ASP.NET.
How have you gone about this problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，没有建议。我最终通过在自动完成选择中创建一个样式精美的跨度来做到这一点。它的文本包含标签，它包含一个锚元素，我将单击事件绑定到该元素，必要时删除该元素，并且我使用 jQuery 数据 API 将 ID 值存储在跨度上。该跨度被添加到容器 div 中，位于我用来自动完成的文本框之前。我还将 keyup 事件绑定到文本框以检查退格键 - 当按下退格键并且文本字段为空时，然后我删除最后一个自动完成项。不过，它有点复杂，因为当按下 keyup 事件时，从文本框中删除的字符已经被删除，所以我也使用 jQuery API 将实际值存储在 keydown 事件中，并检查它keyup 事件。
表单上有一个隐藏字段，我一直用从跨度数据中提取的以逗号分隔的 ID 值列表填充该字段。这可以在添加/删除项目时保持同步，或者仅在我回发时保持同步 - 最简单的方法是清除它并重新填充它，据我所知，这是非常有效的。
加载页面时，必须生成跨度和隐藏字段。
希望这可以帮助其他寻求解决方案的人。
Well, no suggestions. I did it eventually by, in the autocomplete selection, creating a nicely styled span. It's text contains the label, it contains an anchor element that I bind a click event to that removes the element if necessary, and I use the jQuery data API to store the ID value on the span. This span gets added to a container div, before the textbox that I'm using to autocomplete. I also bind a keyup event to the textbox to check for backspace - when it's pressed and the textfield is empty, then I remove the last autocomplete item. It's a little more complex though, since by the time the keyup event is pressed, the character that was being removed from the textbox has already been removed, so I store the actual value in the keydown event too using the jQuery API and check this in the keyup event.
There is a hidden field on the form, that I keep populated with a comma-separated list of ID values extracted from the span's data. This can be kept in sync when adding/removing items, or only when I post back - it's simplest to just clear it and repopulate it, and is quite efficient as far as I can tell.
When loading the page, the spans and hidden field must be generated.
Hope this helps anyone else looking for a solution.