Provide suggestions for the Omnibox

var searchInterface = $("#mySearchInterface"); //This is the root element
searchInterface.on("populateOmnibox" , onPopulateOmnibox); //root.on allows us to bind the event and our function. Here populateOmnibox is the event and onPopulateOmnibox is our function.

function onPopulateOmnibox (e , populateOmniboxObject){
    // First we need to decide what we are searching for.
    // It's up to each component to decide what would suit best for their own need. For example, a facet will look for the whole content of the query box to provide suggestions.
    // Another custom component could instead decide to use only the active word (the position of the cursor in the query box).
    var wordToSearch = populateOmniboxObject.completeQueryExpression.word;
    var regexToSearch = populateOmniboxObject.completeQueryExpression.regex;

    // This is the main function that each custom component will need to implement. In this example, this function will be implemented in the next section.
    // Note that this would cover the case where you can immediately return HTML content. If you need to perform an asynchronous call (for example, an Ajax request), see the
    // section "Populating Omnibox with content from an asynchronous call" of this page.
    var elementToReturn = buildOmniboxContent(regexToSearch, populateOmniboxObject);

    var objectToReturn = {
        zIndex: 100, //Arbitrary number used to determine where the row should render. > 50 will render before the facet. This value is optional.
        element : elementToReturn
    }

    // Use the populateOmniboxObject interface to push suggestions.
    populateOmniboxObject.rows.push(objectToReturn);
}

function buildOmniboxContent(regex, populateOmniboxObject) {

    // This function won't be implemented in this example. Let's assume that it returns an array of values that correctly match the given regex.
    // The logic behind this function would be custom for each component.
    // For example, it could be a query to the Coveo index using the Search api
    var arrayOfValues = findValuesThatMatch(regex)

    // Let's assume that this component wants to build some kind of data table with its suggestions.
    // This is the kind of HTML structure that would indeed work very well with the Omnibox, without much customization.
    var table = $("<table></table>")
    for(var i = 0 ; i < arrayOfValues.length ; i++){
        // We won't implement this function in this example because it's highly related to your page.
        // Let's assume it returns one table row ("<tr></tr>") with the appropriate content of your choosing.
        var oneRowOfContent = buildOmniboxForOneRow(arrayOfValues[i])

        // Add the appropriate class so that this table row can be selected with the keyboard and the mouse by the user.
        $(oneRowOfContent).addClass("coveo-omnibox-selectable")

        // Add the appropriate (custom) event handler for this value.
        // The click event is triggered by the mouse when the user clicks one table row.
        // The keyboardSelect event is triggered when the user selects a value with the keyboard (arrow key up/down + enter)
        // We also use two of the helper functions provided by the Omnibox to clear its content, and then close it.
        $(oneRowOfContent).on("click keyboardSelect" , function(){
            doSomethingWhenThisValueIsSelected();
            populateOmniboxObject.clear();
            populateOmniboxObject.close()
        })
        table.append(oneRowOfContent);
    }

    return table[0];
}

function onPopulateOmnibox(e, populateOmniboxObject) {

    // Construct a new deferred object and add it to the Omnibox object. We'll resolve it later when our Ajax call returns
    var deferred = $.Deferred();
    populateOmniboxObject.rows.push({deferred : deferred});

    // Let's say that we make an Ajax call to some service
    $.ajax({
        url : "http://get/some/data.com",
        success : function(results){
            // When we get our results from the service, we can build the HTML element that the Omnibox will use
            // and resolve the deferred object that we passed to the Omnibox
            var elementToReturn = buildOmniboxContent(results);
            var objectToReturn = {
                zIndex: 100, //Arbitrary number
                element : elementToReturn
            }
            deferred.resolve(objectToReturn);
        },
        error : function(){
            // Don't forget to handle failures, otherwise the Omnibox will wait indefinitely for your results
            deferred.resolve({ element : undefined})
        }
    })
}