Support Menu

Coveo component ResultList

Coveo ResultList Component (CoveoResultList)

The ResultList component is responsible for displaying query results by applying one or several result templates (see Result Templates).

It is possible to include multiple ResultList components along with a single [ResultLayout]{@link ResultLayout} component in a search page to provide different result layouts (see Result Layouts).

This component supports infinite scrolling (see the enableInfiniteScroll option).


Component Options


autoSelectFieldsToInclude: boolean

Specifies whether the ResultList should scan its result templates to discover which fields it must request to be able to render all results.

Setting this option to true ensures that the Coveo Search API does not return fields that are unnecessary for the UI to function.

Default value is false, which means that for each result, the Coveo Search API returns all available fields (unless you specify a list of values in the fieldsToInclude option, in which case the Coveo Search API only returns those fields, if they are available).


  • Many interfaces created with the JavaScript Search Interface Editor explicitly set this option to true.
  • You cannot set this option to true in the Coveo for Sitecore integration.
Markup configuration example(s) :


enableInfiniteScroll: boolean

Specifies whether to automatically retrieve an additional page of results and append it to the results that the ResultList is currently displaying when the user scrolls down to the bottom of the infiniteScrollContainer.

See also the infiniteScrollPageSize and enableInfiniteScrollWaitingAnimation options.

It is important to specify the infiniteScrollContainer option manually if you want the scrolling element to be something else than the default window element. Otherwise, you might find yourself in a strange state where the framework rapidly triggers multiple successive query.

Default value is false.

Markup configuration example(s) :


enableInfiniteScrollWaitingAnimation: boolean

If the enableInfiniteScroll option is true, specifies whether to display the waitingAnimation while fetching additional results.

Default value is true.

Markup configuration example(s) :


fieldsToInclude: Array<IFieldOption>

Specifies a list of fields to include in the query results.

If you set the autoSelectFieldsToInclude option to true, the Coveo Search API returns the fields you specify for this option (if those fields are available) in addition to the fields which the ResultList automatically requests.

Otherwise, the Coveo Search API only returns the fields you specify for this option (if those fields are available), unless you leave this option undefined, in which case the Coveo Search API returns all available fields.

Markup configuration example(s) :


infiniteScrollContainer: HTMLElement

If the enableInfiniteScroll option is true, specifies the element that triggers fetching additional results when the end user scrolls down to its bottom.

You can change the container by specifying its selector (e.g., data-infinite-scroll-container-selector='#someCssSelector').

By default, the framework uses the first vertically scrollable parent element it finds, starting from the ResultList element itself. A vertically scrollable element is an element whose CSS overflow-y attribute is scroll.

This implies that if the framework can find no scrollable parent, it uses the window itself as a scrollable container.

This heuristic is not perfect, for technical reasons. There are always some corner case CSS combination which the framework will not be able to correctly detect as 'scrollable'.

It is highly recommended that you manually set this option if you wish something else than the window to be the scrollable element.


infiniteScrollPageSize: number

If the enableInfiniteScroll option is true, specifies the number of additional results to fetch when the user scrolls down to the bottom of the infiniteScrollContainer.

Default value is 10. Minimum value is 1.

Markup configuration example(s) :


layout: string

Specifies the layout to use when displaying results in this ResultList (see Result Layouts). Specifying a value for this option automatically populates a [ResultLayout]{@link ResultLayout} component with a switcher for the layout.

For example, if there are two ResultList components in the page, one with its layout set to list and the other with the same option set to card, then the ResultLayout component will render two buttons respectively entitled List and Card.

See the ValidLayout type for the list of possible values.

Default value is list.

Markup configuration example(s) :


resultContainer: HTMLElement

Specifies the element inside which to insert the rendered result templates.

Performing a new query clears the content of this element.

You can change the container by specifying its selector (e.g., data-result-container-selector='#someCssSelector').

If you specify no value for this option, a div element will be dynamically created and appended to the result list. This element will then be used as a result container.


waitAnimation: string

Specifies the type of animation to display while waiting for a query to return.

The possible values are:

  • fade: Fades out the current list of results while the query is executing.
  • spinner: Shows a spinning animation while the query is executing.
  • none: Use no animation during queries.

See also the waitAnimationContainer option.

Default value is none.

Markup configuration example(s) :


waitAnimationContainer: HTMLElement

Specifies the element inside which to display the waitAnimation.

You can change this by specifying a CSS selector (e.g., data-wait-animation-container-selector='#someCssSelector').

Default value is the value of the resultContainer option.





  • debugInfo(): any


  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void


  • displayMoreResults(count: number): unknown
  • Executes a query to fetch new results. After the query returns, renders the new results.

    Asserts that there are more results to display by verifying whether the last query has returned as many results as requested.

    Asserts that the ResultList is not currently fetching results.


    • count: number

      The number of results to fetch and display.

    Returns unknown


  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void


  • getAutoSelectedFieldsToInclude(): string[]




  • getDisplayedResultsElements(): HTMLElement[]


  • renderResults(resultElements: HTMLElement[], append?: boolean): Promise
  • Empties the current result list content and appends the given array of HTMLElement.

    Can append to existing elements in the result list, or replace them.

    Triggers the newResultsDisplayed and newResultDisplayed events.


    • resultElements: HTMLElement[]
    • Default value append: boolean = false

    Returns Promise

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.


    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent



Allows the component to bind events and execute them only when it is enabled.




componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.


componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger component state event when modified. Each component can listen to those events.


disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.




logger: Logger

Allows component to log in the dev console.


queryController: QueryController

Contains the singleton that allows to trigger queries.


queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.


root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).


searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.


usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton



  • Creates a new ResultList component. Binds various event related to queries (e.g., on querySuccess -> renderResults). Binds scroll event if the enableInfiniteScroll option is true.


    • element: HTMLElement

      The HTMLElement on which to instantiate the component.

    • Optional options: IResultListOptions

      The options for the ResultList component.

    • Optional bindings: IComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    • Default value elementClassId: string = ResultList.ID

      The class that this component should instantiate. Components that extend the base ResultList use this. Default value is CoveoResultList.

    Returns ResultList