Coveo Global Searchbox

Like the Coveo Searchbox, the Coveo Global Searchbox rendering implements the Coveo JavaScript Search Framework Omnibox component. The Coveo Global Searchbox rendering also provides data source options to configure it as a global searchbox.

The Coveo Global Searchbox rendering triggers search and query suggestion calls to the Search API through the REST endpoint proxy.

Usage Notes

  • Ensure you set the Override search hub data source value properly (see About the Search Hub).

  • When used solely in article pages, the Coveo Global Searchbox is initialized as a standalone search box which redirects to the search page specified in the Search page URI data source field (see Scenario 1: Different Search Boxes in and out of the Search Results Page).

  • When used in both your article and search results page header, insert the Coveo Global Searchbox rendering in an External Components Section. This links the Coveo Global Searchbox to the Coveo Search Interface specified in the External Components Section data source and ensures the Coveo Global Searchbox behaves as if it were inserted within that Coveo Search Interface (see Scenario 2: Same Search Box in and out of the Search Results Page).

Insertion Location

When adding the Coveo Global Searchbox solely to your article headers, insert the Coveo Global Searchbox rendering as illustrated in the video below.

When linking the Coveo Global Searchbox to a search interface, the External Components Section rendering adds a Global Searchbox placeholder. Insert your Coveo Global Searchbox rendering in this Global Searchbox placeholder.

Example insertion sequence for the Coveo Global Searchbox rendering. A placeholder whose Placeholder Key value is ArticleHeaderPlaceholder was created and its Allowed Controls were edited to include the Coveo Search Resources (a mandatory rendering), Coveo Global Searchbox, and Coveo Page View Analytics renderings. The ArticleHeaderPlaceholder was inserted in an article layout .cshtml file. This insertion sequence applies to scenario 1 in Insert and Configure a Global Search Box in which the Coveo Global Searchbox is added solely to your article headers.

When adding the Coveo Global Searchbox solely to your article headers, insert the Coveo Global Searchbox rendering in the partial design header Sitecore placeholder.

When linking the Coveo Global Searchbox to a search interface, the External Components Section SXA rendering adds a coveouiexternalcomponentssxa placeholder. Insert your Coveo Global Searchbox rendering in this coveouiexternalcomponentssxa placeholder.

Example insertion sequence for the Coveo Global Searchbox rendering. This insertion sequence applies to scenario 1 in Insert and Configure a Global Search Box in which the Coveo Global Searchbox is added solely to your article headers.

Data Source Options

Option name Description
Placeholder text See placeholder component option
Height See height component option
Search page URI The search page on which to redirect when there's a query (see initSearchbox component option).
Enable partial match See enablePartialMatch component option
Partial match minimum number of keywords See partialMatchKeywords component option
Partial match threshold See partialMatchThreshold component option
Enable wildcards See enableWildcards component option
Enable question marks See enableQuestionMarks component option
Enable lowercase operators See enableLowercaseOperators component option
Enable query syntax See enableQuerySyntax component option
Query suggest character threshold See querySuggestCharacterThreshold component option
Clear filters on new query See clearFiltersOnNewQuery component option
Enable Coveo Machine Learning query suggestions See enableQuerySuggestAddon component option
Enable field suggestions after typing @ in searchbox See enableFieldAddon component option
Enable field suggestions in searchbox See enableFieldAddon component option
Enable suggestions of query extensions See enableQueryExtensionAddon component option
Query pipeline See pipeline component option
Maximum age See maximumAge component option
Override search hub Used to specify a search hub to override the search hub used for query suggestions in the Search page URI (see About the Search Hub).
Initialization file name Specifies the cshtml file to use to initialize the search box (see Use Custom Initialization Scripts).
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework Omnibox component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Rendering Behavior

In the following example, the Coveo Global Searchbox rendering is inserted directly in an article page header (i.e., not in an External Components Section). The data source is set with the following values:

  • Search page URI: Content/Site4/CoveoSearch

  • Override search hub: ArticleHeaderSearchHub

Generated HTML:

<!-- Beginning of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml" 
     or custom searchbox .cshtml initialization file -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var searchboxElement = document.getElementById("_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9");
        searchboxElement.addEventListener("CoveoComponentInitialized", function() {
            CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "/Site4/CoveoSearch");
        });
    })
</script>
<!-- End of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml" 
     or custom searchbox .cshtml initialization file -->
<div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9_container" class="coveo-for-sitecore-search-box-container"
data-prebind-maximum-age='currentMaximumAge'>
  <div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9" class="CoveoSearchbox" data-enable-omnibox='true'
  data-prebind-maximum-age='currentMaximumAge' data-clear-filters-on-new-query='false'>
    <!-- Beginning of Validate Resources Are Included.cshtml view file -->
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var componentId = "_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9";
            var componentElement = document.getElementById(componentId);
            function showError(error) {
                    console.error(error);
            }
            function areCoveoResourcesIncluded() {
                return typeof (Coveo) !== "undefined";
            }
            if (areCoveoResourcesIncluded()) {
                var event = document.createEvent("CustomEvent");
                event.initEvent("CoveoComponentInitialized", false, true);
                setTimeout(function() {
                    componentElement.dispatchEvent(event);
                }, 0);
            } else {
                componentElement.classList.add("invalid");
                showError("The Coveo Resources component must be included in this page.");
            }
        });
    </script>
    <!-- End of Validate Resources Are Included.cshtml view file -->
    <div class="CoveoForSitecoreBindWithUserContext"></div>
    <div class="CoveoForSitecoreExpressions"></div>
    <div class="CoveoForSitecoreConfigureSearchHub" data-sc-search-hub="ArticleHeaderSearchHub"></div>
  </div>
<div>


Global Searchbox behavior:

Global searchbox redirects to search page

Recommended Articles