Support Menu

Coveo component ResultList

Coveo ResultList Component (CoveoResultList)

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.

Index

Component Options

autoSelectFieldsToInclude

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.

Note:

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

Markup configuration example(s) :
data-auto-select-fields-to-include='true'
data-auto-select-fields-to-include='false'

enableInfiniteScroll

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) :
data-enable-infinite-scroll='true'
data-enable-infinite-scroll='false'

enableInfiniteScrollWaitingAnimation

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) :
data-enable-infinite-scroll-waiting-animation='true'
data-enable-infinite-scroll-waiting-animation='false'

fieldsToInclude

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) :
data-fields-to-include='@foo,@foo2'

infiniteScrollContainer

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

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) :
data-infinite-scroll-page-size='10'

layout

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) :
data-layout='foo'

resultContainer

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

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) :
data-wait-animation='foo'

waitAnimationContainer

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.

Methods

buildResult

buildResults

debugInfo

  • debugInfo(): any

disable

  • 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

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

    Parameters

    • count: number

      The number of results to fetch and display.

    Returns unknown

enable

  • 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

  • getAutoSelectedFieldsToInclude(): string[]

getBindings

getDisplayedResults

getDisplayedResultsElements

  • getDisplayedResultsElements(): HTMLElement[]

renderResults

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

    Parameters

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

    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

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

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

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

componentStateModel

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

disabled: boolean

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

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

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

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

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

usageAnalytics

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

Constructors

constructor

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

    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