将建议结果添加到 jQuery UI 自动完成输入中？

发布于 2024-11-17 15:43:59 字数 567 浏览 2 评论 0原文

我正在尝试扩展 jQuery UI 自动完成以类似于 Google 的搜索字段，其中顶部建议结果中的剩余文本（即不是 request.term 的任何内容）被添加到用户以不同的方式输入的字符串的末尾颜色。

我计划通过使用相对定位在原始输入后面放置一个相同大小的透明 div 来实现此目的，并将顶部匹配的结果以较浅的颜色放置在该 div 中。

我的问题是，访问匹配结果数组的正确方法。我的方法如下（简化的示例）：

$(function() {
    var tags = [
        "One",
        "Two",
        "Three"
    ];
    $("input").autocomplete({
        source: tags,
        open: function() {
            // var topResult = HOW TO ACCESS?
            $('#divForText').text(topResult);
        }
    });
});

任何人都可以澄清如何访问匹配结果数组中的第一个值吗？

原文

I am attempting to expand the jQuery UI autocomplete to resemble that of Google's search field, where the remaining text in the top suggested result (i.e. anything that's not the request.term), is added to the end of the user entered string in a different color.

I had planned to do this by placing an identically sized transparent div behind the original input using relative positioning, and the top matched result placed in this div in a lighter color.

My question is, the correct way to access the matched results array. My approach being as follows (streamlined example):

$(function() {
    var tags = [
        "One",
        "Two",
        "Three"
    ];
    $("input").autocomplete({
        source: tags,
        open: function() {
            // var topResult = HOW TO ACCESS?
            $('#divForText').text(topResult);
        }
    });
});

Can anyone clarify how to access the first value in the matched results array?

分享到QQ

分享到微博

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

发布评论

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

徒留西风 2024-11-24 15:43:59

这是实现此目的的一种方法：

$("input").autocomplete({
    source: function(request, response) {
        var filtered = $.ui.autocomplete.filter(tags, request.term)
            , first = filtered.length ? filtered[0] : null;

        if (first) {
            $("#divForText").text(first);
        } else {
            $("#divForText").empty();
        }

        response($.ui.autocomplete.filter(langs, request.term));
    }
});

基本上，这是使用将函数作为参数的 source 版本。该函数仅使用 过滤器 自动完成内部使用的方法，然后更新内容。

这是一个工作示例： http://jsfiddle.net/UGsHR/75/

Here's one way you could accomplish this:

$("input").autocomplete({
    source: function(request, response) {
        var filtered = $.ui.autocomplete.filter(tags, request.term)
            , first = filtered.length ? filtered[0] : null;

        if (first) {
            $("#divForText").text(first);
        } else {
            $("#divForText").empty();
        }

        response($.ui.autocomplete.filter(langs, request.term));
    }
});

Basically, this is using the version of source that takes a function as a parameter. That function simply uses the filter method that autocomplete uses internally, and then updates the content.

Here's a working example: http://jsfiddle.net/UGsHR/75/

回复收藏 0 原文

~没有更多了~