Support Menu

Coveo component ResultList

The ResultList component is responsible for displaying the results of the current query using one or more result templates (see Result Templates).

This component supports many additional features, such as infinite scrolling.


Component Options


autoSelectFieldsToInclude: boolean

Specifies whether the ResultList should scan its template and discover which fields it needs to render all results.

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

See also ResultList.options.fieldsToInclude.

Default value is false.


Many interfaces created with the Interface Editor explicitly set this option to true.

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 infinite scroll container.

See also ResultList.options.infiniteScrollPageSize, ResultList.options.infiniteScrollContainer and ResultList.options.enableInfiniteScrollWaitingAnimation.

It is important to specify the ResultList.options.infiniteScrollContainer manually if you want the scrolling element to be something else than the default window element. Otherwise, you might get in a weird state where the framework will rapidly trigger multiple successive query.

Default value is false.

Markup configuration example(s) :


enableInfiniteScrollWaitingAnimation: boolean

If ResultList.options.enableInfiniteScroll is true, specifies whether to display the ResultList.options.waitAnimation 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.

Specifying a list of values for this option ensures that the Search API does not send fields that are unnecessary for the UI to function.

See also ResultList.options.autoSelectFieldsToInclude.

Default value is undefined.

Markup configuration example(s) :


infiniteScrollContainer: HTMLElement

If ResultList.options.enableInfiniteScroll is true, specifies the element that triggers the fetching of 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 detect correctly as 'scrollable'.

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


infiniteScrollPageSize: number

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

Default value is 10. Minimum value is 1.

Markup configuration example(s) :


layout: string

Specifies the layout to use for displaying the results within this ResultList. Specifying a value for this option automatically populates a ResultLayout component with a switcher for the layout.

For example, if there are two ResultList components in the page, one with its ResultList.options.layout set to list and the other with the same option set to card, then the ResultLayout component will render two buttons respectively titled 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 within which to insert the rendered templates for results.

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 ResultList.options.waitAnimationContainer.

Default value is none.

Markup configuration example(s) :


waitAnimationContainer: HTMLElement

Specifies the element inside which to display the ResultList.options.waitAnimation.

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

Default value is the value of ResultList.options.resultContainer.





  • 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): void
  • 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 void


  • 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(resultsElement: HTMLElement[], append?: boolean): void
  • 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.


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

    Returns void

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 ResultList.options.enableInfiniteScroll 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