Custom suggestion list.

function onPopulateOmniBox (e , populateOmniBoxObject){
// First we need to decide what we are searching for.
// It is 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 (e.g., an Ajax request), refer to 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 = $('<tr>').append($('<td>').text(arrayOfValues[i]));//buildOmniboxForOneRow(arrayOfValues[i],populateOmniBoxObject);
// oneRowOfContent.append($("<td>"+arrayOfValues[i]+"</td>"));
// 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;
}