Gravatar for

Question by ncipollina, Sep 16, 2016 2:34 PM

Custom Omnibox disable selection

I am attempting to implement a custom Omnibox component in my Sitecore implementation. Is there a way to override the events that are fired when a user selects an item from the Omnibox. We need to customize the url that is set when selecting an item and we need to prevent the default behavior from occuring. We are following the steps in this article

Thanks in advance, Nick

2 Replies
Gravatar for

Answer by Simon, Sep 19, 2016 1:20 PM

First, I would suggest o use our existing component in Sitecore. See:

The component is using the CoveoSearchBox.acsx sublayout (or SearchBoxView.cshtm for MVC). Duplicate the file and the component before customizing it, just like you would do for the standard search:

Now, you can then start providing different type of suggestions, and the behavior will be different for each of them:

  • Query suggestions : Will redirect to the search page with the selected query
  • Facet suggestion : Will redirect to the search page with the selected facet
  • Result suggestions : Will redirect to the selected result

For more info on how to implement each of them for both the search box and search interface:

And here is the advanced topic on how to create your own Omnibox Suggestion Provider:

Let me know which component you want to use and what exactly you want to customize and I will do my best to help you.


Gravatar for

Comment by ncipollina, Sep 19, 2016 1:25 PM

Hi Simon,

Normally, we would just do this but we cannot. The problem is that we are using Coveo and Angular in the same application and they both want to use the hashtag url syntax. We had to customize our coveo url's to play nicely with Angular. This is why I need to override the even that is fired on selecting an item.

Thanks, Nick

Gravatar for

Comment by Simon, Sep 19, 2016 1:54 PM

Ok I found your previous post:

Is it possible to give a bit of details on how disable the hash/manage them yourself?

If I understand correctly, you want the click event on the omnibox suggestions to have a different effect on the url?

Gravatar for

Answer by olamothe, Sep 19, 2016 4:27 PM

Which type of suggestion component do you wish to modify ?

Currently it's possible to provide suggestions with either : Facets, Result list, Coveo analytics service, Coveo Machine Learning service etc.

Also, could you provide me the version of the UI library you are using ? This will help to know if it's a very old version or newer !

You can check this by typing Coveo.version in the browser console.

Gravatar for

Comment by ncipollina, Sep 19, 2016 4:33 PM

Basically what we are trying to do is this, create a custom search box that has the omnibox capabilities to show suggested queries etc.. We need to be able to get those suggested results and direct to a custom url because of the conflict between Coveo and Angular. I'd like to use the Ominbox so I don't have to write logic to handle all of the showing of suggestions as the user types etc…

We are on version 1 of the javascript framework.

Thanks, Nick

Gravatar for

Comment by olamothe, Sep 19, 2016 4:55 PM

Ok. Is there a particular reason why you are not using the OOTB Coveo component that possess query suggestions capability ? Pretty much all of them already provide a way to modify the default behaviour on selection

If you really wish to go for the full custom route, there is this article that might help you :

You can basically do whatever you want with this, but my guess is that it might be a bit too overkill ? Maybe im wrong though !

Gravatar for

Comment by ncipollina, Sep 20, 2016 9:19 AM

We are not using the OOTB Coveo component because of the fact that we cannot use the default url's that Coveo emits. Because of the conflict between angular and coveo we had to customize our url structure. I'd be happy to use the OOTB Coveo component if I could intercept and override the url for the redirect.

Thanks, Nick

Ask a question