标记后触发的 jQuery 自动完成插件答案

【问题标题】：jQuery Autocomplete Plugin that triggers after token标记后触发的 jQuery 自动完成插件
【发布时间】：2019-10-01 01:37:15
【问题描述】：

我正在构建一个应用程序，并希望在文本区域内进行自动完成，就像 Twitter/Facebook 如何使用 @[name] 完成的。但是，我想在输入 [TID:x] 时触发它，其中 x 是任意长度的整数。

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

【问题讨论】：

标签： jquery autocomplete

【解决方案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/

注意事项：

这是一个非常有限的演示。如果您尝试使其在字符串中间自动完成，它将不起作用。
要完成此示例，您需要确定光标在输入字段中的位置并将文本插入其中
可能还有其他错误，但我绝对认为这是可行的。希望这可以帮助您入门。

【讨论】：

太棒了！这看起来可以解决问题。我会在接下来的几天里搞砸它，如果有任何其他问题，我会回复。如果最终成功，我会将其标记为答案！谢谢！
确实是很好的答案。谢谢老哥！

【解决方案2】：

我为此创建了一个插件，它使用 jQuery-UI 自动完成和 Andrew 的示例（谢谢）。

网址：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"
  ]
});

最好，丹尼尔

【讨论】：

这是迄今为止我最喜欢的解决方案。现在，如果您可以支持内容可编辑的 div，那将是完美的。