# 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` component in a search page to provide different result layouts (see Result Layouts).

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

## Index

### Methods

- buildResult
- buildResults
- debugInfo
- disable
- displayMoreResults
- enable
- getAutoSelectedFieldsToInclude
- getBindings
- getDisplayedResults
- getDisplayedResultsElements
- renderResults
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- autoSelectFieldsToInclude
- enableInfiniteScroll
- enableInfiniteScrollWaitingAnimation
- enableScrollToTop
- fieldsToInclude
- infiniteScrollContainer
- infiniteScrollPageSize
- layout
- resultsContainer
- waitAnimation
- waitAnimationContainer

### Constructors

- constructor

## Methods

### buildResult

- buildResult(result: IQueryResult): Promise<HTMLElement>

- - Defined in ui/ResultList/ResultList.ts :435

  Builds and returns an HTMLElement for the given result.

  #### Parameters

  - ##### result: IQueryResult

    the result to build an HTMLElement from.

  #### Returns Promise<HTMLElement>

### buildResults

- buildResults(results: IQueryResults): Promise<HTMLElement[]>

- - Defined in ui/ResultList/ResultList.ts :425

  Builds and returns an array of HTMLElement with the given result set.

  #### Parameters

  - ##### results: IQueryResults

    the result set to build an array of HTMLElement from.

  #### Returns Promise<HTMLElement[]>

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

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

  #### Returns void

### displayMoreResults

- displayMoreResults(count: number): Promise<IQueryResults>

- - Defined in ui/ResultList/ResultList.ts :449

  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.

  #### Parameters

  - ##### count: number

    The number of results to fetch and display.

  #### Returns Promise<IQueryResults>

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  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

- getAutoSelectedFieldsToInclude(): string[]

- - Defined in ui/ResultList/ResultList.ts :374

  Get the fields needed to be automatically included in the query for this result list.

  #### Returns string[]

### getBindings

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### getDisplayedResults

- getDisplayedResults(): IQueryResult[]

- - Defined in ui/ResultList/ResultList.ts :481

  Gets the list of currently displayed result.

  #### Returns IQueryResult[]

### getDisplayedResultsElements

- getDisplayedResultsElements(): HTMLElement[]

- - Defined in ui/ResultList/ResultList.ts :489

  Gets the list of currently displayed result HTMLElement.

  #### Returns HTMLElement[]

### renderResults

- renderResults(resultElements: HTMLElement[], append?: boolean): Promise<void>

- - Defined in ui/ResultList/ResultList.ts :411

  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.

  #### Parameters

  - ##### resultElements: HTMLElement[]

  - ##### Default value append: boolean = false

  #### Returns Promise<void>

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  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.

  #### Parameters

  - ##### 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

## Properties

### bind

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

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

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

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

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

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

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

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

root: HTMLElement

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

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

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

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

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### autoSelectFieldsToInclude

autoSelectFieldsToInclude: boolean

- Defined in ui/ResultList/ResultList.ts :221

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.

Notes:

- 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.

Default

  `false`

Markup configuration example(s) :

    data-auto-select-fields-to-include='true'
    data-auto-select-fields-to-include='false'

### enableInfiniteScroll

enableInfiniteScroll: boolean

- Defined in ui/ResultList/ResultList.ts :159

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

  `false`

Markup configuration example(s) :

    data-enable-infinite-scroll='true'
    data-enable-infinite-scroll='false'

### enableInfiniteScrollWaitingAnimation

enableInfiniteScrollWaitingAnimation: boolean

- Defined in ui/ResultList/ResultList.ts :201

Whether to display the `waitingAnimation` while fetching additional results.

Only effective when

  `enableInfiniteScroll` is truthy

Default

  `true`

Markup configuration example(s) :

    data-enable-infinite-scroll-waiting-animation='true'
    data-enable-infinite-scroll-waiting-animation='false'

### enableScrollToTop

enableScrollToTop: boolean

- Defined in ui/ResultList/ResultList.ts :263

Whether to scroll back to the top of the page when the end-user:

- interacts with a facet when `infiniteScrollContainer` is set to `true`
- interacts with the `Pager` component when `infiniteScrollContainer` is set to `false`

Note: Setting this option to `false` has no effect on dynamic facets. To disable this behavior on a `DynamicFacet` component, you must set its own `enableScrollToTop` option to `false`.

Default

  `true`

Available since

  July 2019 Release (v2.6459)

Markup configuration example(s) :

    data-enable-scroll-to-top='true'
    data-enable-scroll-to-top='false'

### fieldsToInclude

fieldsToInclude: IFieldOption[]

- Defined in ui/ResultList/ResultList.ts :234

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.

### infiniteScrollContainer

infiniteScrollContainer: HTMLElement

- Defined in ui/ResultList/ResultList.ts :192

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.

Only effective when

  `enableInfiniteScroll` is truthy

### infiniteScrollPageSize

infiniteScrollPageSize: number

- Defined in ui/ResultList/ResultList.ts :167

The number of additional results to fetch when the user scrolls down to the bottom of the `infiniteScrollContainer`.

Only effective when

  `enableInfiniteScroll` is truthy

Minimum

  `1`

Default

  `10`

Markup configuration example(s) :

    data-infinite-scroll-page-size='5'

### layout

layout: "list" | "card" | "table"

- Defined in ui/ResultList/ResultList.ts :249

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.

Required

  Specifying a value for this option is required for the component to work

Default

  `list`

Markup configuration example(s) :

    data-layout='card'

### resultsContainer

resultsContainer: HTMLElement

- Defined in ui/ResultList/ResultList.ts :118

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

waitAnimation: "fade" | "spinner" | "none"

- Defined in ui/ResultList/ResultList.ts :133

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

  `none`

Markup configuration example(s) :

    data-wait-animation='spinner'

### waitAnimationContainer

waitAnimationContainer: HTMLElement

- Defined in ui/ResultList/ResultList.ts :143

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'`).

Defaults to the value of the `resultsContainer` option.

## Constructors

### constructor

- new ResultList(element: HTMLElement, options?: IResultListOptions, bindings?: IComponentBindings, elementClassId?: string): ResultList

- Overwrites Component.constructor

  - Defined in ui/ResultList/ResultList.ts :283

  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`.

  #### Parameters

  - ##### 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