---
title: Coveo Searchbox
slug: '3041'
canonical_url: https://docs.coveo.com/en/3041/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Searchbox
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [Omnibox](https://coveo.github.io/search-ui/components/omnibox.html) component which renders a query box input, query clearing and submission buttons, and an area for query suggestions to be displayed.

The **{doctitle}** rendering triggers search and query suggestion calls to the Search API through the reverse proxy.

## Usage notes

* See [Query Suggestions](https://docs.coveo.com/en/2797/) for more details on how to enable and use this feature.

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Searchbox</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Searchbox</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/searchbox-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="footnote">
    Example insertion sequence for the <strong>Coveo Searchbox</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>Coveo for Sitecore SXA rendering insertion locations are not limited by placeholder Allowed Controls. The <strong>Coveo Searchbox</strong> rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/searchbox-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="footnote">
    Example insertion sequence for the <strong>Coveo Searchbox</strong> rendering.
  </div>
</div>

## Data source options

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

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Placeholder text
|See the [placeholder](https://coveo.github.io/search-ui/components/omnibox.html#options.placeholder) component option.

|Height
|See the [height](https://coveo.github.io/search-ui/components/searchbox.html#options.height) component option.

|Enable partial match
|See the [enablePartialMatch](https://coveo.github.io/search-ui/components/querybox.html#options.enablepartialmatch) component option.

|Partial match minimum number of keywords
|See the [partialMatchKeywords](https://coveo.github.io/search-ui/components/querybox.html#options.partialmatchkeywords) component option.

|Partial match threshold
|See the [partialMatchThreshold](https://coveo.github.io/search-ui/components/querybox.html#options.partialmatchthreshold) component option.

|Enable wildcards
|See the [`enableWildcards`](https://coveo.github.io/search-ui/components/querybox.html#options.enablewildcards) component option.

|Enable question marks
|See the [enableQuestionMarks](https://coveo.github.io/search-ui/components/querybox.html#options.enablequestionmarks) component option.

|Enable lowercase operators
|See the [enableLowercaseOperators](https://coveo.github.io/search-ui/components/querybox.html#options.enablelowercaseoperators) component option.

|Enable query syntax
|See the [enableQuerySyntax](https://coveo.github.io/search-ui/components/querybox.html#options.enablequerysyntax) component option.

|Query suggest character threshold
|See the [querySuggestCharacterThreshold](https://coveo.github.io/search-ui/components/omnibox.html#options.querysuggestcharacterthreshold) component option.

|Clear filters on new query
|See the [clearFiltersOnNewQuery](https://coveo.github.io/search-ui/components/omnibox.html#options.clearfiltersonnewquery) component option.

|Enable Coveo Machine Learning query suggestions
|See the [enableQuerySuggestAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablequerysuggestaddon) component option.

|Enable field suggestions after typing @ in searchbox
|See the [enableFieldAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablefieldaddon) component option.

|Enable field suggestions in searchbox
|See the [enableFieldAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablefieldaddon) component option.

|Enable suggestions of query extensions
|See the [enableQueryExtensionAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablequeryextensionaddon) component option.

|Initialization file name
|Specifies the `cshtml` file to use to initialize the search box (see [Use custom initialization scripts](https://docs.coveo.com/en/2788/)).

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **Omnibox** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding rendering behavior

```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("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](https://docs.coveo.com/en/assets/images/c4sc-v5/searchbox-with-qs.gif)