用于多行文本框的自动完成扩展器 - Facebook风格

时间:2012-08-27 11:59:48

标签: asp.net ajax facebook textbox autocompleteextender

我在我的应用程序中有一个更大的文本框,并为用户提供了在这样的几行上输入文本的可能性:

第一段文字

第二段文字

依旧......

每一行都是具有重要意义的独特数据。事情是我想在用户在一行(如@)上键入某个字符后使用ajax auto complete extender功能,并根据用户在@之后输入的第一个字母过滤数据库中的记录。将出现完整的建议清单。例如,第三段文本@ Action1,意味着在用户键入A后,系统会提示他输入值列表。

我有几个值得关注的问题:首先,可以仅对文本框中的部分文本使用自动完成扩展器,然后对多行使用自动完成扩展器(即一次 - 在每行行为中)?关于它的位置,我想我没有别的选择,而是在它引用的文本框的底部,尽管我希望它出现在@符号下面。

非常感谢。

更新:我发现了类似于我在这里寻找的内容:Twitter-style autocomplete in textarea,但作者只是简要解释了他的解决方案。任何帮助非常感谢,谢谢!

2 个答案:

答案 0 :(得分:0)

  

每一行都是具有重要意义的独特数据。

为什么你使用的是textarea,而不是多个<input>字段?

听起来像你的UI设计中的错误已经存在,所以我的其余部分是理论上的;我可能不会详细介绍,因为对你的问题的明智解决方法是上面的那个。


  

首先,可以仅为文本框中的部分文本使用自动完成扩展程序,

为什么不应该?例如,textarea中的游标位置是可读的(尽管它需要解决跨浏览器问题)。

  

和第二个是否对多行有效(即一次 - 在每一行行为中)?

只要换行符是“硬”换行符(由用户自己创建,使用enter / return),将实际的textarea内容拆分为"\n"以使每行作为单个值是没有问题的。

  

关于它的位置,我想我没有别的选择,而是在它引用的文本框的底部,尽管我希望它出现在@符号下面。

使用等宽字体时,您可以尝试粗略地测量@的位置,按行和列号打开,并将其与字符宽度和行高相匹配。对于其他字体,在@字符之前测量前一个文本的实际宽度可能需要更多“魔力”。

答案 1 :(得分:0)

我为此创建了一个Meteor包,它允许自由文本和多个自动完成源。 Meteor的数据模型允许使用自定义渲染列表进行快速多规则搜索。如果您没有将Meteor用于您的网络应用程序(我相信),那么很遗憾,您无法找到任何可用于自动完成的功能。

  

https://github.com/mizzao/meteor-autocomplete

有关其工作原理的图片,请参阅链接。分叉,拉动和改进!