2

我在我的应用程序中有一个更大的文本框,并为用户提供了在多行上输入文本的可能性,如下所示:

第一段文字

第二段文字

等等...

每一行都是具有重要意义的不同数据。问题是我想在用户在一行上键入某个字符(例如@)后使用ajax自动完成扩展器功能,并根据用户在@之后键入的第一个字母过滤数据库中的记录,当自动将出现完整的建议列表。例如,第三段文本@Action1,表示在用户键入 A 后,将提示他提供一个可供选择的值列表。

我有几个问题:首先,是否可以仅对文本框中的部分文本使用自动完成扩展器,其次它是否像这样对多行工作(即一次 - 在每行行为中)?关于它的位置,我想除了它所指的文本框底部之外别无选择,尽管我希望它出现在 @ 符号下方。

非常感谢。

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

4

2 回答 2

0

每一行都是具有重要意义的不同数据。

那你为什么使用文本区域,而不是多个<input>字段?

在我看来,您在 UI 设计中的错误已经存在,所以我剩下的回答是相当理论的;我可能不会详细介绍,因为您的问题的明智解决方案是上述问题。


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

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

其次,它对多行是否像这样工作(即一次 - 在每一行行为中)?

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

关于它的位置,我想除了它所指的文本框底部之外别无选择,尽管我希望它出现在 @ 符号下方。

当使用等宽字体时,您可以尝试通过行号和列号粗略测量@ 的位置,并将其与字符宽度和行高相匹配。对于其他字体,可能需要更多“魔法”来测量 @ 字符之前先前文本的实际宽度。

于 2012-08-28T12:44:31.450 回答
0

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

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

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

于 2013-09-22T22:03:31.323 回答