--- title: Display instant results slug: latest-instant-results canonical_url: https://docs.coveo.com/en/atomic/latest/usage/displaying-results/instant-results/ collection: atomic source_format: adoc --- # Display instant results This article explains how to leverage the [`atomic-search-box-instant-results`](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box-instant-results/) component to display results whenever the user hovers over a [query suggestion](https://docs.coveo.com/en/1015/) in an `atomic-search-box`. To correctly render results related to a [query suggestion](https://docs.coveo.com/en/1015/), `atomic-search-box-instant-results` must be placed inside the `atomic-search-box` component and a [query suggestion](https://docs.coveo.com/en/1015/) component. Components which can be used to provide [query suggestions](https://docs.coveo.com/en/1015/) include [`atomic-search-box-recent-queries`](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box-recent-queries/) and [`atomic-search-box-query-suggestions`](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box-query-suggestions/). Additionally, you can provide [custom query suggestions](https://docs.coveo.com/en/atomic/latest/usage/atomic-custom-query-suggestions/) if you wish to retrieve suggestions from an API external to the [Coveo Platform](https://docs.coveo.com/en/186/). Similar to how search results are displayed on the page, define a result template which will be used by `atomic-search-box-instant-results` to render results. This component can also be paired with the `atomic-did-you-mean` component for handling query corrections. ## Code example The following code sample shows you how to leverage `atomic-search-box-instant-results` to display instant results. You can copy-paste it, as is, to start playing with the concepts discussed in this article. **HTML** ```html Atomic Search Interface <1> <2> ``` <1> Ensure that a [query suggestion](https://docs.coveo.com/en/1015/) component, such as ``, and the `` component are placed inside the `` component. <2> Define a result template inside `atomic-search-box-instant-results`. In this example, we provide a link to the suggestion being displayed along with information about the [source](https://docs.coveo.com/en/246/) from which the [item](https://docs.coveo.com/en/210/) originated. If you're using the [Atomic](https://docs.coveo.com/en/lcdf0264/) React Wrapper, [define the result template](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-react-wrapper#result-templates) via the `template` property, as in the following code snippet. **React** ```jsx { return ( <>

{"Source: "}

); }} /> ```