为用户提供过滤下拉列表的搜索功能答案

【问题标题】：Provide users with a search feature filtering a dropdownlist为用户提供过滤下拉列表的搜索功能
【发布时间】：2009-08-30 06:35:14
【问题描述】：

我正在开发一个用于数据输入的 ASP.NET 表单。用户必须从包含大约 1000 个客户端的下拉列表中选择一个客户端。

现在客户列表正在增长，用户要求我添加一个查找功能：他们希望输入部分名称并使用名称匹配的客户过滤下拉列表。因此，如果他们输入“aaa”，他们希望只看到名称中包含“aaa”的客户。

我查看了 ajax 控件工具包的 AutoComplete，但它适用于文本框，而不是下拉列表。

谁能提出一个好的解决方案？

【问题讨论】：

标签： asp.net ajax drop-down-menu filtering

【解决方案1】：

然后在文本框上使用它！在下拉列表中查找的人肯定知道客户的姓名。在我看来，在这种情况下几乎没有区别。

我一直在使用 jQuery 标签，建议添加到我的 MVC 应用程序中，效果非常好。

http://remysharp.com/2007/12/28/jquery-tag-suggestion/

如果您有兴趣，请发表评论，我会给您我正在使用的代码。

如果您真的想使用下拉列表，您可以在更新面板中有一个文本框和下拉列表。当用户输入文本（并单击按钮）时，您可以使用过滤到用户输入内容的结果填充下拉列表。

【讨论】：

我使用下拉列表的原因是客户端的 ID 绑定到（选定的）值。使用文本框时，我必须使用名称查找客户端。
查找客户端 ID 是个大问题吗？如果下拉列表只有静态值，我可以看到这是一个问题，但是如果它是从数据库中填充的，那么查找 ID 应该很简单。我一直觉得标签建议文本框增加了更多的控制力、灵活性，并且对用户来说当然更有吸引力。
为了简单起见，我决定使用文本框+下拉选项。谢谢

【解决方案2】：

我认为文本框实际上是首选。选择框不要求输入 - 所以过滤它变成了一个隐藏的技巧（更不用说 Firefox 无论如何都会做到这一点）。

您可以轻松地在文本框旁边放置一个图像，以表明它具有选项，允许鼠标驱动或键盘驱动交互。

我偏爱 JQuery，所以我会使用 JQuery's autocomplete - 它具有需要匹配的配置选项，或者单击该框将下拉所有项目。

如果您对“渐进式增强”感兴趣，您最好同时使用传统的选择输入（用于可访问性），该输入由基于相同数据驱动的自动完成文本框替换。比如：

<select id="s">
   <option value="foo">Foo</value>
   <option value="bar">Bar</value>
</select>

var d = $('#s OPTION').map(function() {
   return $(this).text();
});

$('#s').hide().append('<input type="text" />')
   .autocomplete(d, {
        mustMatch: true,
        minChars: 0,
        autoFill: true,
        matchContains: false
    })
    .result(function(e, d, f) {
       // Select option for the form to submit
       $('#s').val(d);
    });

您还可以让选择保持可见 - 这使它更灵活，但可能更令人困惑 - 并将事件处理程序挂钩到选择框以更新文本框，以便它们保持同步。

【讨论】：