在文本中间自动完成(如 Google Plus)

发布于 11-30 08:54 字数 230 浏览 0 评论 0原文

有很多选项可用于自动完成。他们中的大多数似乎只针对输入的前几个字母。

在 Google Plus 中,输入 @ 后,自动完成选项很快就会下降,无论它出现在表单字段中的哪个位置,并使用紧随 @ 后面的字母来指导自动完成。 (它看起来也很不错!)

有没有人共享代码来做这类事情?

有没有人有任何尝试实现这个玩具版本的指示(例如在 jQuery 中)?

There are tons of options out there for doing autocompletion. Most of them seem to work on the first few letters that are typed.

In Google Plus, an autocomplete option drops down soon after typing @, no matter where it occurs in the form field, and uses the letters immediately following @ to guide the autocomplete. (It also looks quite nice!)

Has anybody shared code to do this sort of thing?

Does anybody have any pointers for trying to implement a toy version of this (e.g. in jQuery)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

甜味超标?2024-12-07 08:54:31

这可以通过 jQueryUI 的自动完成小部件 实现。具体来说,您可以调整此演示来满足您的要求。这是一个例子:

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

var availableTags = [ ... ]; // Your local data source.

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {
        var term = request.term,
            results = [];
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            }
        }
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

它正在工作: http://jsfiddle.net/UdUrk/

让我知道如果您需要更多信息(例如如何使其与远程数据源一起使用)。

更新:以下是使用远程数据源(StackOverflow 的 API)的示例:http://jsfiddle.net /LHNky/。它还包括自动完成建议的自定义显示。

This is possible with jQueryUI's autocomplete widget. Specifically, you can adapt this demo to satisfy your requirement. Here's an example:

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

var availableTags = [ ... ]; // Your local data source.

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {
        var term = request.term,
            results = [];
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            }
        }
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

And here it is working: http://jsfiddle.net/UdUrk/

Let me know if you need any more information (such as how to make it work with a remote datasource).

Update: Here's an example using a remote datasource (StackOverflow's API): http://jsfiddle.net/LHNky/. It also includes custom display of autocomplete suggestions.

铃予2024-12-07 08:54:31

我编写了一个基于 jQuery UI 自动完成功能的 jQuery 插件。这是我的解决方案:

http://www.hawkee.com/snippet/9391/

像这样称呼它:


$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});

I wrote a jQuery plugin based on the jQuery UI autocomplete functionality. Here is my solution:

http://www.hawkee.com/snippet/9391/

You call it like this:


$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});
℡Ms空城旧梦2024-12-07 08:54:31

您可以使用自动完成搜索事件来检测文本中是否包含@。
如果不是@,则返回 false 并且自动完成将不起作用。

例如:
$( ".selector" ).autocomplete({
搜索:函数(事件,ui){...}
});

you can use autocomplete search event to detect if the text is having @ in it.
If it is not @ then just return false and autocomplete will not work.

eg :
$( ".selector" ).autocomplete({
search: function(event, ui) { ... }
});

指尖凝香2024-12-07 08:54:31

我为此编写了一个引导插件。无论 @ 出现在表单字段中的哪个位置,它都有效。它适用于 ContentEditable div 而不是文本区域: http://sandglaz.github.com/bootstrap-tagautocomplete/< /a>

I wrote a bootstrap plugin for this. It works no matter where the @ occurs in the form field. It's for ContentEditable divs rather than text area: http://sandglaz.github.com/bootstrap-tagautocomplete/

天煞孤星2024-12-07 08:54:31

为了稍微解释一下 Andrew Whittaker 的答案,jQuery UI Autocomplete 的 source 选项用于指定一个数组,其中包含触发小部件后要在下拉列表中显示的项目。它可以被定义为这样的数组、返回这样的数组的函数或者生成这样的数组的资源的URL。

如果 source 被定义为函数,则函数的参数 requestresponse 可用于帮助组成其返回数组并提供分别到小部件。您尤其对 request 感兴趣,因为它的成员 term 包含调用函数时小部件所附加到的输入元素的值。

明白我要说的是什么吗?它非常简单,解析 request.term 以获得感兴趣的 @ 符号和光标之间的文本,并使用该文本创建数组以提供给小部件。但是,您需要做一些工作(或使用一些现成的函数)才能以跨浏览器兼容的方式可靠地定位光标。

如果您正在寻找可提供您想要的功能的现有插件,请查看 Mentionator仿真。它结构良好、易于理解并且有大量注释,因此您应该可以轻松理解如何采用我所描述的方法。它也是由您真正维护的:)。

To expatiate Andrew Whittaker's answer a bit, the source option of jQuery UI Autocomplete is used to specify an array containing the items that are to be displayed in the drop-down list once the widget is triggered. It can be defined as such an array, a function that returns such an array, or a URL to a resource which produces such an array.

If source is defined as an function, the parameters of the function, request and response, can be used to help compose its return array and supply it to the widget, respectively. request in particular is of interest to you, since its member, term contains the value of the input element to which the widget is affixed, at the time the function is invoked.

See where I'm going with this? Its pretty simple, parse request.term for the text between the @ symbol of interest and the cursor, and use that text to create the array to supply to the widget. You'll need to do a little work (or employ some ready-made functions) to be able to locate the cursor reliably in a cross-browser compatible way, however.

Check out Mentionator if you're looking for an existing plug-in that provides the functionality you're trying to emulate. It is well structured, easy to follow, and copiously commented, so you should have little trouble understanding how to take the approach I've described. It is also maintained by yours truly:) .

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文