Twitter的风格自动完成的文本区域 [英] Twitter-style autocomplete in textarea
问题描述
我要寻找一个JavaScript自动完成实施，其中包括以下内容：
I am looking for a Javascript autocomplete implementation which includes the following:
- 可以在HTML textarea的使用
- 允许在不调用自动完成输入普通文字
- 检测的
@字符，并开始自动完成，当键入 - 选项通过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的键preSS（）事件来检查用户pressing的 @ 字符。
如果是这样的情况下，使用jQuery的用户界面示出了模态对话框。这个对话框包含一个自动填充文本字段（许多选项，可以用在这里，但我recommmend jQuery的Tokeninput ）< BR>
当用户选择的对话框中的一个选项中，标签被添加到文本域并关闭对话框。
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.
这是不是最优雅的解决方案，但它的工作原理，它不需要额外的按键presses相比，我原来的设计。
This is not the most elegant solution, but it works and it does not require extra keypresses compared to my original design.
修改
所以基本上，我们有大量的文本框，用户可以输入文字。他应该能够标记用户（这只是意味着插入＃＆LT;用户id＆GT; 文本）。我附上了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.
这篇关于Twitter的风格自动完成的文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
