3

I'm trying to build an Omnibox that matches what the user types against suggestions taken from an external data source, via jQuery. No luck so far.

In essence, the whole thing would function just like an autocomplete in jQuery, assuming this how the Omnibox is supposed to work (details are scarce, even in Google's Chrome developer resources).

Warning: I am not a proficient jQuery developer by any means, and most of what I've written is an exercise in brute force cut-paste trial and error until either success or exhaustion.

So far, I only have an example taken from an article by a user here, 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});
    });
}

However, I cannot make this do anything else, despite the various other sample code examples I've found.

Firstly, I have a data source which I'm presently using for an autocomplete in jQuery, which is working fine, and returns the data in JSON format:

$(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);
    };
});

So I'd like to use that as the source. I know that needs to go in the onInputChanged method, but everything I've tried has so far failed.

If anyone has any ideas or Omnibox examples, that would help tremendously.

Wayne Smallman
  • 1,690
  • 11
  • 34
  • 56

0 Answers0