Coveo Searchbox

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

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

Coveo Hive

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

Example insertion sequence for the Coveo Searchbox rendering.

Coveo Hive SXA

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

The following table lists the available data source options for this rendering.

Option name Description

Placeholder text

See the placeholder component option.

Height

See the height component option.

Enable partial match

See the enablePartialMatch component option.

Partial match minimum number of keywords

See the partialMatchKeywords component option.

Partial match threshold

See the partialMatchThreshold component option.

Enable wildcards

See the enableWildcards component option.

Enable question marks

See the enableQuestionMarks component option.

Enable lowercase operators

See the enableLowercaseOperators component option.

Enable query syntax

See the enableQuerySyntax component option.

Query suggest character threshold

See the querySuggestCharacterThreshold component option.

Clear filters on new query

See the clearFiltersOnNewQuery component option.

Enable Coveo Machine Learning query suggestions

See the enableQuerySuggestAddon component option.

Enable field suggestions after typing @ in searchbox

See the enableFieldAddon component option.

Enable field suggestions in searchbox

See the enableFieldAddon component option.

Enable suggestions of query extensions

See the 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 | Coveo for Sitecore 5