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

时间:2008-09-02 19:52:24

标签: ajax .net-3.5

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

好的,这就像在下拉列表中包装AJAX自动完成一样简单吗?没有? (拜托?)

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

此小部件可以使用三个项目:文本输入,按钮输入和用于保存结果的无序列表。

 __________  _
|__________||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。

答案 2 :(得分:0)

我不完全确定你想要什么,但是Ra-Ajax AutoCompleter肯定支持在其中拥有“控件”。你可以在Stacked的搜索框中看到我们正在使用链接的地方(右上角)。但如果你愿意,这也可以是LinkBut​​tons ......

声明;我和Ra-Ajax一起工作......

答案 3 :(得分:-1)

在我看来,你根本不应该使用AJAX。

这就是原因:

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

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

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

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

它与您需要的略有不同,它显示双击而不是焦点上的下拉列表。这应该很容易修改。

我希望这会有所帮助。