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

Properties

Accessors

Component Options

Constructors

Methods

buildResult

buildResults

  • 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

disable

  • disable(): void

  • 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

  • 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

  • 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

  • getDisplayedResults(): IQueryResult[]

getDisplayedResultsElements

  • getDisplayedResultsElements(): HTMLElement[]

renderResults

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

    Parameters

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

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

    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

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 different components. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

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

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.

Static ID

ID: string

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

Accessors

usageAnalytics

Component Options

autoSelectFieldsToInclude

autoSelectFieldsToInclude: boolean

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.

If you set this option to true, the fields referenced in your result folding templates won't be automatically resolved. In such a case, you must manually specify those fields using the fieldsToInclude option.

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

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

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

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

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[]

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. Note that the autoSelectFieldsToInclude option doesn't automatically request fields for folding templates; in such a case, you must manually specify fields using this option to avoid empty results.

If you set the autoSelectFieldsToInclude option to false, the Coveo Search API only returns the fields you specify for this option (if those fields are available).

If you set the autoSelectFieldsToInclude option to false and leave this option undefined, the Coveo Search API returns all available fields.

infiniteScrollContainer

infiniteScrollContainer: HTMLElement

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

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"

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

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"

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

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

  • 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