3

我正在尝试构建一个多功能框，将用户键入的内容与通过 jQuery 从外部数据源获取的建议相匹配。到目前为止没有运气。

本质上，整个事情就像 jQuery 中的自动完成功能一样，假设 Omnibox 应该是这样工作的（细节很少，即使在Google 的 Chrome 开发人员资源中也是如此）。

警告：无论如何，我都不是一个熟练的 jQuery 开发人员，而且我所写的大部分内容都是暴力剪切粘贴试验和错误的练习，直到成功或筋疲力尽。

到目前为止，我只有一个来自用户 Ido Green 的文章的示例：

chrome.omnibox.onInputChanged.addListener(
    function(text, suggest) {
        suggest([
            {content: "CRM", description: " fetch the internal CRM"},
            {content: "ERP", description: " fetch the internal ERP"},
            {content: "sales", description: " fetch the lastest sales report"}
        ]);
    }
);
chrome.omnibox.onInputEntered.addListener(
    function(text) {
        if (text.indexOf("/") < 1) {
            text += "/";
        }
        if (text.indexOf("http") < 0) {
            text = "http://our-internal-portal/" + text;
        }
        alert('We are taking you to: "' + text + '"');
        navigate(text);
    });
function navigate(url) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.update(tab.id, {url: url});
    });
}

但是，尽管我找到了各种其他示例代码示例，但我不能让它做任何其他事情。

首先，我有一个数据源，我目前正在使用 jQuery 中的自动完成功能，它工作正常，并以 JSON 格式返回数据：

$(function(){
    $('#link-bookmarks').autocomplete({
        source: base_url + "bookmarks/jq_get_bookmarks_by_search_as_object/",
        appendTo: ".bookmark-link-results",
        open: function(event, ui) {
        $('ul.ui-autocomplete#link-bookmarks')
                .removeAttr('style')
                .hide()
                .appendTo('.bookmark-link-results')
                .show();
        $('#links-bookmarks').show();
        },
        select: function(event, ui) {
            $('.bookmark-link-results')
                .append('<div class="bookmark-link-box" id="bookmark-link-box-' + ui.item.bookmark_id + '"><input type="checkbox" id="bookmark-link-item-' + ui.item.bookmark_id + '" name="bookmark-links-add[]" value="' + ui.item.bookmark_id + '" checked="checked"><a href="' + base_url + 'bookmarks/edit/' + ui.item.bookmark_id + '" title="Edit ' + ui.item.title + '">' + ui.item.title + '</a> [<a href="' + base_url + 'bookmarks/view/' + ui.item.bookmark_id + '">View</a>] [<a href="' + base_url + 'bookmarks/visit/' + ui.item.bookmark_id + '" target="_blank" rel="nofollow">Link</a>] <textarea class="comment" id="bookmark-link-comment-box-' + ui.item.bookmark_id + '" name="bookmark-link-comments[]"></textarea></div>');
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $('<li></li>')
            .data("item.autocomplete", item)
            .append('<a>' + item.snippet + '</a>')
            .appendTo(ul);
    };
});

所以我想用它作为来源。我知道这需要进入 onInputChanged 方法，但到目前为止我尝试的一切都失败了。

如果有人有任何想法或多功能框示例，那将有很大帮助。

4

0 回答 0