---
title: Coveo Query Suggest Preview
slug: '3232'
canonical_url: https://docs.coveo.com/en/3232/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Query Suggest Preview
> **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.


[.version.c4sc.c4sc-new.5-0-655-1.April-15&-2020]
[Coveo for Sitecore 5.0.655.1](https://docs.coveo.com/en/3229#release-notes)


Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [QuerySuggestPreview](https://coveo.github.io/search-ui/components/querysuggestpreview.html) component which renders previews of the top query results matching the currently focused [Coveo Machine Learning](https://docs.coveo.com/en/188/)-powered [query suggestions](https://docs.coveo.com/en/1015/).

## Usage notes

* To use the **{doctitle}** rendering, you first need to enable Query Suggestions in your search interface, which involves creating a machine learning model and feeding it analytics data (see [Enabling query suggestions](https://docs.coveo.com/en/2797#enabling-query-suggestions)).

* In the **{doctitle}** rendering data source, select a result template that has been inserted in the current search page.

* 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 Query Suggest Preview</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Searchbox Components</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/query-suggest-preview-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Query Suggest Preview</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>When you add the <strong>Coveo Searchbox</strong> SXA rendering, this adds a <code class="highlighter-rouge">coveouisearchboxcomponentssxa</code> placeholder. Insert your <strong>Coveo Query Suggest Preview</strong> rendering in this <code class="highlighter-rouge">coveouisearchboxcomponentssxa</code> placeholder.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/query-suggest-preview-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Query Suggest Preview</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

|Execute query delay
|See the [executeQueryDelay](https://coveo.github.io/search-ui/components/querysuggestpreview.html#options.executequerydelay) component option.

|Number of preview results
|See the [numberOfPreviewResults](https://coveo.github.io/search-ui/components/querysuggestpreview.html#options.numberofpreviewresults) component option.

|Result template
|Allows selecting a result template, present in the current page, from a list of **Coveo File Result Template** and **Coveo Item Result Template** data source item names (see the [resultTemplate](https://coveo.github.io/search-ui/components/querysuggestpreview.html#options.resulttemplate) component option).

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

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

## Sample generated HTML and corresponding visual output

```html
<div id="coveo405cec6f" class="CoveoQuerySuggestPreview" data-execute-query-delay="10"
data-number-of-preview-results="4" data-prebind-result-template-selector="itemIdSelector"
data-result-template-selector="#coveo7251E2B7" data-applied-prebind="true">
</div>
```

![Query Suggest Preview Animation | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/query-suggest-preview-animation.gif)