代码之家 › 专栏 › 技术社区 › jamiebarrow

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

jquery-autocomplete jquery-ui jquery asp.net

0

jamiebarrow · 技术社区 · 14 年前

如何使用autocomplete处理多个项目的选择?我从JSON web服务返回的对象包含一个ID和一个标签—ID是数据库中实体的ID,标签是一些要显示给用户的文本。

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

现在,我想有多个选择。我想能够输入一些文本,得到一个自动完成下拉列表,选择一个项目和一些其他选项,然后能够点击一个'添加新'按钮或类似的能够选择另一个实例。

我不太清楚怎么做?我在考虑一个隐藏字段——我假设服务器端出现了许多具有相同名称/id的隐藏字段,作为一个数组,然后我就可以使用它们了。但是我还没有在ASP.NET中尝试过这个。

1 回复 | 直到 14 年前

1

0

jamiebarrow 14 年前

好吧,没有建议。最后,我在autocomplete选项中创建了一个样式很好的span。它的文本包含标签,它包含一个锚元素,我将click事件绑定到该锚元素,如果需要的话,它将删除该元素,并且我使用jQuery数据API将ID值存储在span上。这个范围被添加到一个容器div中,在我用来自动完成的文本框之前。我还将keyup事件绑定到textbox以检查backspace—当按下它并且textfield为空时,我删除最后一个autocomplete项。不过这有点复杂,因为当按下keyup事件时,从文本框中删除的字符已经被删除,所以我也使用jqueryapi将实际值存储在keydown事件中,并在keyup事件中检查这一点。

表单上有一个隐藏字段,我一直用从span数据中提取的ID值的逗号分隔列表填充该字段。这可以在添加/删除项目时保持同步,也可以仅在我发回邮件时保持同步—清除并重新填充它是最简单的方法,据我所知,这是相当有效的。