Coveo Searchbox

Implements the Coveo JavaScript Search Framework Omnibox component which renders a query box input, query clearing and submission buttons, and an area for query suggestions to be displayed.

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

Usage Notes

Insertion Location

The Coveo Searchbox rendering is an Allowed Control in the following placeholder(s): Searchbox

Example insertion sequence for the Coveo Searchbox rendering.

Coveo for Sitecore SXA rendering insertion locations are not limited by placeholder Allowed Controls. The Coveo Searchbox rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

Example insertion sequence for the Coveo Searchbox rendering.

Data Source Options

Option name Description
Placeholder text See placeholder component option
Height See height 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
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

<!-- 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("coveo3a1cafb9");
      searchboxElement.addEventListener("CoveoComponentInitialized", function() {
          CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "");
      });
  })
</script>
<!-- End of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml" 
     or custom searchbox .cshtml initialization file -->
<div id="coveo3a1cafb9_container" class="coveo-for-sitecore-search-box-container" 
data-prebind-maximum-age="currentMaximumAge" data-applied-prebind="true" data-maximum-age="900000">
  <div id="coveo3a1cafb9" class="CoveoSearchbox" data-enable-omnibox="true" 
  data-enable-query-suggest-addon="true" data-enable-query-syntax="true" 
  data-prebind-maximum-age="currentMaximumAge" data-placeholder="Looking for something?" 
  data-applied-prebind="true" data-maximum-age="900000">
   <!-- Beginning of Validate Resources Are Included.cshtml view file -->
   <script type="text/javascript">
       document.addEventListener("DOMContentLoaded", function() {
           var componentId = "coveo3a1cafb9";
           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=""></div>
  </div>
<div>

Searchbox with query suggestions

What's Next for Me?