ajax - 带有链接按钮的自动完成下拉菜单 - 或“AJAX 变得狂野”

Question

好的，所以我想要一个带有链接按钮的自动完成下拉菜单作为选择。因此，用户将光标放在“文本框”中，并看到一个选项列表。他们可以开始输入以缩小列表范围，也可以选择列表中的一个选项。一旦他们单击（或按回车键）链接到的数据集将被选择过滤。

好的，这就像在下拉列表中包裹 AJAX 自动完成一样简单吗？不？（请？）

Answer 1

您必须处理下拉列表的 OnSelectedIndexChanged 事件，以根据用户选择重新绑定数据集。如果您希望过滤发生在异步回发中，请将数据集（或我假设的数据网格）和您的下拉列表包装在 UpdatePanel 中。无论如何，这是一种方法。

Answer 2

这个小部件可以由三个项目组成：文本输入、按钮输入和用于保存结果的无序列表。

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul 显示在：

• 文本输入的 'keyUp' 事件（如果值非空）
• 按钮输入的“点击”事件（如果当前不可见）

ul隐藏在：

• 按钮输入的“点击”事件（如果当前可见）
• 列表项的“点击”事件

当显示 ul 或触发文本输入的 'keyUp' 事件时，需要对服务器进行 AJAX 调用以更新列表。

成功后，结果应放在 ul 中。创建列表项时，它们应该附加一个“单击”事件，该事件设置文本输入值并隐藏 ul（可能必须在 li 内添加一个链接以将事件附加到）。

最难的部分实际上是 CSS。JavaScript 很简单，尤其是具有支持多种浏览器的原型之类的可靠库。

您可能希望为项目支持一些 ID，因此您可以将一些隐藏的输入添加到每个带有 id 的列表项，并在文本输入旁边存储选定的项目 ID。

Answer 3

我不完全确定你想要什么，但 Ra-Ajax AutoCompleter肯定支持在其内部拥有“控件”。您可以在Stacked事实上（右上角）的搜索框中看到我们正在使用链接的位置。但是，如果您愿意，这也可以是 LinkBut​​tons...

免责声明；我与 Ra-Ajax 合作...

Answer 4

在我看来，你根本不应该为此使用 AJAX。

原因如下：

(1) 在焦点上：他可以选择的所有选项都显示在下拉列表中。这意味着所有可能的选项都已发送到客户端。

(2) 如果用户输入了某些内容，下拉列表中的条目数将被过滤以匹配。这可以在客户端轻松完成。在这一点上，作为 ajax'y 并返回服务器只会减慢速度。

phpguru.org 有一个“几乎完全”您需要的控件：

http://www.phpguru.org/static/AutoComplete.html#demo

它与您需要的略有不同，因为它在双击而不是焦点时显示下拉菜单。这应该很容易修改。

我希望这有帮助。