Question

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

从本质上讲，整个事情就像jQuery中的自动完成一样，假设Omnibox应该如何工作（细节很少，即使在Google's Chrome developer resources中）。

警告：无论如何我都不是一个熟练的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方法，但到目前为止我尝试的所有方法都失败了。

如果有人有任何想法或Omnibox的例子，那将会有很大的帮助。

为Google Chrome构建Omnibox扩展程序

0 个答案: