在令牌之后触发的jQuery自动完成插件

我正在构建一个应用程序，并且希望在textarea中进行自动完成，就像Twitter / Facebook使用@ [name]一样。 但是，当我输入[TID：x]时，我想触发它​​，其中x是任意长度的整数。

看到Twitter / Facebook在您点击@符号后开始自动完成，然后将文本数据发送到自动完成后。 有没有人知道jQuery UI插件（或任何其他插件）是否可以做这样的事情？

Answer 1

这确实是可能的。 您可以使用自动完成小部件的事件（ search和select ）来完成此操作：

 var triggered = false; var trigger = "TDI:"; $("input").autocomplete({ source: [...], search: function() { if (!triggered) { return false; } }, select: function(event, ui) { var text = this.value; var pos = text.lastIndexOf(trigger); this.value = text.substring(0, pos + trigger.length) + ui.item.value; triggered = false; return false; }, focus: function() { return false; }, minLength: 0 }).bind("keyup", function() { var text = this.value; var len = text.length; var last; var query; var index; if (triggered) { index = text.lastIndexOf(trigger); query = text.substring(index + trigger.length); $(this).autocomplete("search", query); } else if (len >= trigger.length) { last = text.substring(len - trigger.length); triggered = (last === trigger); } }); 

在这里演示： http ： //jsfiddle.net/andrewwhitaker/kCkga/

笔记：

• 这是一个非常有限的演示。 如果您尝试在字符串中间自动完成它，它将无法工作。
• 要完成此示例，您需要做一些工作，找出光标在输入字段中的位置，并在那里插入文本
• 可能是其他的错误，但我绝对认为这是可行的。 希望这能让你开始。

Answer 2

我已经为它创建了一个插件，它使用jQuery-UI Autocomplete和Andrew的例子（感谢你）。

url： https ： //github.com/experteer/autocompleteTrigger

演示： http ： //jsfiddle.net/dmattes/2YRgW/1/

 $('input,textarea').autocompleteTrigger({ triggerStart : '@', triggerEnd: '', source: [ "Asp", "BASIC", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ] }); 

最好，丹尼尔