小编典典

文本区域的Twitter风格自动完成

ajax

我正在寻找一个Javascript自动完成实现,其中包括以下内容:

  • 可以在HTML文本区域中使用
  • 允许键入常规文本而无需调用自动完成功能
  • 检测@字符并在键入时开始自动完成
  • 通过AJAX加载选项列表

我认为这与Twitter在推文中进行标记时的操作类似,但是我找不到很好的,可重用的实现。
jQuery的解决方案将是完美的。

谢谢。


阅读 196

收藏
2020-07-26

共1个答案

小编典典

我找不到任何完全符合我的要求的解决方案,因此得到了以下结果:

我使用jQuery keypress()事件来检查用户是否按下了@字符。
在这种情况下,将使用jQuery UI显示模式对话框。此对话框包含一个自动完成的文本字段(可以在此处使用许多选项,但我建议使用jQuery
Tokeninput

当用户在对话框中选择一个选项时,会将标签添加到文本字段,然后关闭对话框。

这不是最优雅的解决方案,但它可以工作,并且与我的原始设计相比,不需要额外的按键。

编辑
因此,基本上,我们有一个大文本框,用户可以在其中输入文本。他应该能够“标记”用户(这只是意味着#<userid>在文本中插入)。我附加到jQuery
keyup事件,并@使用(e.which == 64)来显示显示模式的文本字段来检测字符,以选择要标记的用户。

解决方案的实质就是带有jQuery
Tokeninput
文本框的模式对话框。当用户在此处键入时,将通过AJAX加载用户列表。请参阅网站上的示例以了解如何正确使用它。当用户关闭对话框时,我将选定的ID插入大文本框中。

2020-07-26