在令牌后触发的 jQuery 自动完成插件 [英] jQuery Autocomplete Plugin that triggers after token

问题描述

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

I'm building an application, and would like to do an autocomplete within a textarea, much like how Twitter/Facebook does theirs with the @[name]. However, I would like to it trigger when I enter [TID:x], where x is an integer of any length.

似乎 Twitter/Facebook 在您点击 @ 符号后启动它们的自动完成，然后在它之后发送文本数据以进行自动完成.有没有人知道 jQuery UI 插件(或任何其他插件)是否可以做这样的事情?

It appears that Twitter/Facebook start their autocomplete after you hit the @ sign, and then sends the text data after it for the autocomplete. Does anyone have any idea if the jQuery UI plugin (or any other plugin) can do something like this?

推荐答案

这确实是可能的.您可以点击自动完成小部件的事件(search和 select) 来完成:

This is indeed possible. You can tap into the autocomplete widget's events (search and select) to accomplish this:

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/

注意事项:

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

• This is a very limited demo. It will not work if you try to make it autocomplete in the middle of the string.
• To complete this example, you'd need to do some work with figuring out the position of the cursor in the input field and inserting the text there instead
• Probably other bugs, but I definitely think it's doable. Hope this gets you started.

这篇关于在令牌后触发的 jQuery 自动完成插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！