jquery:从自动完成填充选择列表?

发布于 2024-09-24 18:46:49 字数 362 浏览 1 评论 0原文

基本问题:从数千个列表中选择几个项目。

潜在的解决方案:

我有一个自动完成字段,用于搜索数据库,并返回名称/ID 对。这工作正常。

下一步是保留选定的 ID,并允许用户根据需要删除一些 ID。为此,我一直在考虑使用选择,并希望有一个类似于 提供的 UI这个,但它不起作用:它允许您选择选择中已存在的项目,但不适用于动态创建的选择。

最后一步是传统的回发(使用提交按钮,这是在 asp.net webforms 中),我需要访问最终的 ID 列表。

还有其他选择吗?

The basic problem: selecting a few items from a list of thousands.

The potential solution:

I have an autocomplete field that searches the db, and returns a name/id pair. This is working fine.

The next step is to preserve the selected IDs, and allow the user to remove some if needed. For this, I've been looking at using a select, and was hoping a UI something like that provided by this, but it doesn't work: it allows you to select items that already exist in the select, but doesn't work with a dynamically created select.

The final step is a traditional postback (using a submit button, this is in asp.net webforms) where I'll need to have access to the final list of IDs.

Are there other options for this?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

平安喜乐 2024-10-01 18:46:49

根据您下面的评论,有很多方法可以给这只猫剥皮。以下方法类似于 SelectList 的想法,只是它不使用下拉列表。与 DropdownList 相比,Listbox 的好处是用户可以同时查看多个项目。当然,选择使用列表框还是下拉列表并不重要,因为它们本质上都提供相同的功能。这个答案的关键是,值存储在客户端上,直到您准备好提交为止。

  1. 创建一个自动完成文本框,在您键入时动态填充列表框。
  2. 单击列表框项目会发生两件事:
    1. 所选项目的 ID 存储在客户端数组中
    2. 项目列表在页面上呈现/重新呈现,与 SelectList 完全相同。单击红色“X”将从数组中删除 ID 并重新呈现列表。您必须自己编写一些 jQuery 编码,但这并不多。
  3. 重复上述步骤,直到用户选择了所有项目。

单击“保存”后,仅将选定的项目提交到服务器进行处理。

Based on your comments below, there are a lot of ways to skin this cat. The following approach is similar to the SelectList idea only it doesn't use a dropdown list. The nice thing about the Listbox versus the DropdownList is that the user will be able to view many items at once. Of course, the choice of using a Listbox or a DropdownList doesn't really matter as they both essentially provide the same functionality. The key about this answer is that values are stored on the client until you're ready to submit.

  1. Create an autocomplete textbox that dynamically fills a Listbox as you type.
  2. Clicking on a Listbox item results in two things happeing:
    1. The ID of the selected item is stored in a client-side array
    2. A list of items are rendered/re-rendered on the page exactly like the SelectList. Clicking the red 'X' will remove the ID from the array and re-render the list. You'll have to do a bit of jQuery coding on your side but it isn't much.
  3. The above steps are repeated until the user has selected all of their items.

Upon clicking "Save", only the selected items are submitted to the server for processsing.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文