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

问题描述

我建立一个应用程序，并想一个textarea内做一个自动完成，多少像Twitter / Facebook的怎么做他们的@ [名]。不过，我想，当我进入[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.

看来，微博/ 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?

推荐答案

这确实是可能的。您可以点击进入自动完成构件的事件（ 搜索 和 选择 ）来实现：

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屋！