textarea 中 Twitter 风格的自动完成 [英] Twitter-style autocomplete in textarea

问题描述

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

I am looking for a Javascript autocomplete implementation which includes the following:

• 可用于 HTML 文本区域
• 允许在不调用自动完成功能的情况下输入常规文本
• 检测 @ 字符并在键入时启动自动完成
• 通过 AJAX 加载选项列表

• Can be used in a HTML textarea
• Allows for typing regular text without invoking autocomplete
• Detects the @ character and starts autocomplete when it is typed
• Loads list of options through AJAX

我相信这与 Twitter 在推文中标记时所做的类似，但我找不到一个很好的、可重复使用的实现.
使用 jQuery 的解决方案将是完美的.

I believe that this is similar to what Twitter is doing when tagging in a tweet, but I can't find a nice, reusable implementation.
A solution with jQuery would be perfect.

谢谢.

推荐答案

我找不到任何完全符合我的要求的解决方案，所以我得到了以下解决方案:

I could not find any solution that matched my requirements perfectly, so I ended up with the following:

我使用 jQuery keypress() 事件来检查用户是否按下了 @ 字符.
如果是这种情况，将使用 jQuery UI 显示一个模式对话框.此对话框包含一个自动完成文本字段(此处可以使用许多选项，但我建议使用 jQuery Tokeninput)
当用户在对话框中选择一个选项时，会在文本字段中添加一个标签并关闭对话框.

I use the jQuery keypress() event to check for the user pressing the @ character.
If this is the case, a modal dialog is shown using jQuery UI. This dialog contains an autocomplete text field (many options can be used here, but I recommmend jQuery Tokeninput)
When the user selects an option in the dialog, a tag is added to the text field and the dialog is closed.

这不是最优雅的解决方案，但它有效并且与我的原始设计相比不需要额外的按键.

This is not the most elegant solution, but it works and it does not require extra keypresses compared to my original design.

编辑
所以基本上，我们有我们的大文本框，用户可以在其中输入文本.他应该能够标记"用户(这只是意味着在文本中插入 #).我附加到 jQuery keyup 事件并使用 (e.which == 64) 检测 @ 字符以显示带有文本字段的模式，用于选择要标记的用户.

Edit
So basically, we have our large text box where the user can enter text. He should be able to "tag" a user (this just means inserting #<userid> in the text). I attach to the jQuery keyup event and detect the @ character using (e.which == 64) to show a modal with a text field for selecting the users to tag.

解决方案的核心就是这个带有 jQuery Tokeninput 文本框的模态对话框.当用户在此处键入时，用户列表将通过 AJAX 加载.有关如何正确使用它，请参阅网站上的示例.当用户关闭对话框时，我将选定的 ID 插入到大文本框中.

The meat of the solution is simply this modal dialog with a jQuery Tokeninput text box. As the user types here, the list of users is loaded through AJAX. See the examples on the website for how to use it properly. When the user closes the dialog, I insert the selected IDs into the large text box.

这篇关于textarea 中 Twitter 风格的自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！