带链接按钮的自动完成下拉菜单 - 或“AJAX 疯狂”

Question

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

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

Answer 1

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

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

ul 显示于：

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

ul 隐藏于：

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

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

成功后，结果应放置在 ul 中。创建列表项时，应该附加一个“click”事件，用于设置文本输入值并隐藏 ul（可能需要在 li 内添加一个链接来附加事件）。

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

您可能希望支持项目的某些 ID，因此您可以使用 id 向每个列表项添加一些隐藏输入，并在文本输入旁边添加一些隐藏输入以存储所选项目 ID。

Answer 2

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

Answer 3

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

免责声明；我和 Ra-Ajax 一起工作...

Answer 4

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

原因如下：

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

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

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

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

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

我希望这有帮助。