coveo-search-ui
Version:
Coveo JavaScript Search Framework
1,411 lines • 84.7 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ResultList | Coveo JavaScript Search Framework - Reference Documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/bqa0xml.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/overrides.css">
<link rel="stylesheet" href="../assets/css/coveo-connect-header.css">
<link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v2.10122/css/CoveoFullSearch.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://static.cloud.coveo.com/coveo.analytics.js/coveoua.js"></script>
<script src="../assets/js/modernizr.js"></script>
<script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10122/js/CoveoJsSearch.min.js"></script>
<script src="../assets/js/coveo-connect-header.js"></script>
<script src="../assets/gen/js/playground.js"></script>
<script src="../assets/js/searchUIrefDoc.js"></script>
<link href="../assets/favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<header class="no-sticky">
<div class="content">
<div class="main-header">
<div class="logo">
<a class="logo-img-wrap" href="https://coveo.com">
<div class="logo-imgbg">
<svg width="124" height="32" viewBox="0 0 409 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M164.7 36.2L159.8 41.4C156.4 38.1 152.8 36.2 147.9 36.2C139.4 36.2 133 42.9 133 52.3C133 61.7 139.4 68.4 147.9 68.4C152.5 68.4 156.9 66.5 160.1 63.2L164.7 68.4C160.7 73 155 75.4 148.3 75.4C134.3 75.4 125.2 65.4 125.2 52.3C125.2 38.9 134.3 28.9 148.3 28.9C154.6 28.8 160.6 31.5 164.7 36.2Z" fill="white"/>
<path d="M219.4 52.3C219.4 65.4 209.4 75.4 196 75.4C182.3 75.4 172.3 65.4 172.3 52.3C172.3 38.9 182.3 28.9 196 28.9C209.4 28.9 219.4 38.9 219.4 52.3ZM180.2 52.3C180.2 61.7 186.9 68.4 196 68.4C204.8 68.4 211.5 61.7 211.5 52.3C211.5 42.9 204.8 36.2 196 36.2C186.9 36.2 180.2 42.9 180.2 52.3Z" fill="white"/>
<path d="M252.3 74.5H243.1L224.3 30.1H232.8L247.7 66.9L262.6 30.1H270.8L252.3 74.5Z" fill="white"/>
<path d="M318.8 52V55H283.8C284.7 64.1 291.1 68.7 298.7 68.7C303.8 68.8 308.8 66.9 312.7 63.5L316.7 68.7C311.2 73.9 305.1 75.5 298.4 75.5C285 75.5 275.6 66.4 275.6 52.4C275.6 38.7 285 29 297.8 29C310 28.9 318.8 38.6 318.8 52ZM283.9 48.6H311.3C310.4 41 305.2 35.8 297.9 35.8C290 35.9 285.1 41 283.9 48.6Z" fill="white"/>
<path d="M376 52.3C376 65.4 366 75.4 352.6 75.4C338.9 75.4 328.9 65.4 328.9 52.3C328.9 38.9 338.9 28.9 352.6 28.9C365.9 28.9 376 38.9 376 52.3ZM336.8 52.3C336.8 61.7 343.5 68.4 352.6 68.4C361.4 68.4 368.1 61.7 368.1 52.3C368.1 42.9 361.4 36.2 352.6 36.2C343.4 36.2 336.8 42.9 336.8 52.3Z" fill="white"/>
<path d="M88.1 14.9C79.5 6.4 68.3 1.2 56.2 0C55.3 0 54.6 0.8 54.6 1.8C54.6 2.2 54.7 2.5 55 2.8L73.8 21.3C73.8 21.6 73.8 21.6 73.5 21.6C68.3 17.8 62.2 15.5 55.9 14.9C55.3 14.8 54.8 15.2 54.7 15.8C54.7 16.1 54.8 16.4 55 16.7L67.8 29.5C67.8 29.5 67.8 29.8 67.5 29.5C64 27.3 60.1 25.9 55.9 25.5C55.3 25.5 55 26.1 55.3 26.7L76.9 48.3C77.5 48.9 78.4 48.3 78.1 47.7C77.8 43.6 76.4 39.6 74.1 36.1C73.8 36.1 74.1 35.8 74.1 36.1L86.6 48.3C87.2 48.9 88.4 48.3 88.4 47.4C87.7 41 85.4 34.8 81.7 29.5C81.4 29.5 81.7 29.2 81.7 29.5L100.6 48C101.1 48.6 101.9 48.7 102.5 48.3C103 48 103.2 47.4 103 46.8C101.9 34.7 96.6 23.4 88.1 14.9Z" fill="#00ADFF"/>
<path d="M14.9 14.9C23.6 6.5 34.8 1.2 46.8 0C47.7 0 48.4 0.6 48.5 1.5C48.5 1.9 48.4 2.4 48 2.7L29.5 21.3C29.2 21.6 29.5 21.6 29.5 21.6C34.8 17.8 41 15.5 47.4 14.9C48.3 14.9 48.9 16.1 48.3 16.7L35.6 29.5C35.3 29.5 35.6 29.8 35.6 29.5C39.1 27.3 43 26 47.2 25.5C47.8 25.5 48.4 26.1 47.8 26.7L26.1 48.3C25.5 48.9 24.9 48.3 24.9 47.7C25.3 43.6 26.8 39.6 29.2 36.1C29.2 36.1 28.9 35.8 28.9 36.1L16.7 48.3C15.8 48.9 14.6 48.3 14.9 47.4C15.5 40.9 17.8 34.7 21.6 29.5C21.6 29.5 21.3 29.2 21.3 29.5L2.7 48C1.5 49.2 0 48.3 0 46.8C1.2 34.8 6.5 23.6 14.9 14.9Z" fill="#F05245"/>
<path d="M14.9 88.8C23.4 97.4 34.7 102.7 46.8 103.7C47.6 103.8 48.3 103.3 48.4 102.5C48.5 102 48.3 101.6 48 101.2L29.5 82.4C29.2 82.4 29.5 82.1 29.5 82.4C34.8 86.2 41 88.5 47.4 89C48.3 89 48.9 87.8 48.3 87.2L35.6 74.5C35.3 74.2 35.6 74.2 35.6 74.2C39 76.5 43 78 47.1 78.4C47.7 78.4 48.3 77.5 47.7 77.2L26.1 55.6C25.5 55 24.9 55.3 24.9 56.2C25.3 60.3 26.8 64.3 29.2 67.8C29.2 67.8 28.9 68.1 28.9 67.8L16.7 55.6C15.8 55 14.6 55.3 14.9 56.5C15.5 62.9 17.8 69 21.6 74.1C21.6 74.3 21.5 74.4 21.3 74.4L2.7 55.6C2 55 0.9 55.2 0.4 55.9C0.2 56.2 0.1 56.5 0 56.9C1.1 68.9 6.4 80.2 14.9 88.8Z" fill="#1CEBCF"/>
<path d="M88.1 88.8C79.6 97.5 68.3 102.8 56.2 103.7C55 104 54.1 102.2 55 101.3L73.8 82.5C73.8 82.5 73.8 82.2 73.5 82.5C68.3 86.3 62.2 88.6 55.9 89.2C55.3 89.3 54.8 88.8 54.7 88.2C54.7 87.9 54.8 87.6 55 87.3L67.8 74.5C67.8 74.2 67.8 74.2 67.5 74.2C64.1 76.6 60.1 78.1 56 78.4C55.5 78.3 55.2 77.9 55.3 77.5C55.3 77.4 55.3 77.3 55.4 77.2L77 55.6C77.6 55 78.5 55.3 78.2 56.2C77.9 60.3 76.5 64.3 74.2 67.8C73.9 67.8 74.2 68.1 74.2 67.8L86.7 55.6C87.1 55.2 87.8 55.2 88.2 55.6C88.4 55.8 88.5 56.2 88.5 56.5C87.8 62.8 85.5 68.9 81.8 74.1C81.5 74.4 81.8 74.4 81.8 74.4L100.6 55.6C101.5 54.7 103.3 55.6 103 56.8C102 68.9 96.7 80.2 88.1 88.8Z" fill="#FFE300"/>
<path opacity="0.87" d="M390.8 31.9V43H388.9V31.9H385.4V30.1H394.4V31.9H390.8Z" fill="white"/>
<path opacity="0.87" d="M407.7 43V34.4L404.7 40.5999H403.3L400.3 34.4V43H398.3V30.2H400.3L404 38.2L407.7 30.2H409.6V43H407.7Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="409" height="104" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
</a>
<a class="logo-text" href="https://docs.coveo.com">
<span class="logo-text-bar">|</span>
<span class="logo-text-custom">docs</span>
</a>
</div>
<div class="search">
<div id="coveoConnectHeaderStandaloneSearchbox" class="searchbox">
<div class="CoveoSearchbox" style="display: flex;" type="text" data-auto-focus="false" data-enable-omnibox="true"
data-inline="false" data-enable-wildcards="true" data-enable-search-as-you-type="false"
data-enable-reveal-query-suggest-addon="true" data-enable-query-syntax="true"
data-enable-field-addon="true" data-placeholder="Search"></div>
<div class="CoveoAnalytics"></div>
</div>
</div>
<nav class="subnav">
<ul>
<li><a href="https://connect.coveo.com/" target="_blank">Community</a></li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSeyNL18g4JWIDR5xEyIMY48JIjyjwXRmlCveecjXBNSLh4Ygg/viewform?usp=sf_link" target="_blank">Feedback</a></li>
<li><a href="https://docs.coveo.com/en/3378/">News</a></li>
</ul>
</nav>
</div>
</div>
</header>
<subHeader class="no-sticky">
<div class="content">
<nav class="navBar">
<ul>
<li><button class="dropdownButton">Guides<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://docs.coveo.com/en/1724/">Searching With Coveo</a></li>
<li><a href="https://docs.coveo.com/en/2648/">Project Guide</a></li>
<li><a href="https://docs.coveo.com/en/1351/">Services</a></li>
</li>
</ul>
</button>
</li>
<li>
<button class="dropdownButton">API Reference<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://coveo.github.io/search-ui/" target="_blank">JavaScript Search Framework</a></li>
<!-- <li><a href="#">Atomic</a></li> -->
<li><a href="https://docs.coveo.com/en/headless/latest/reference/">Headless</a></li>
<li><a href="https://docs.coveo.com/en/12/">Push API</a></li>
<li><a href="https://docs.coveo.com/en/8/">Field API</a></li>
<li><a href="https://docs.coveo.com/en/13/">Search API</a></li>
<li><a href="https://docs.coveo.com/en/18/">Usage Analytics API</a></li>
<li><a href="https://docs.coveo.com/en/4/">Other APIs</a></li>
</ul>
</button>
</li>
<li>
<button class="dropdownButton">Extensions<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://docs.coveo.com/en/1499/">Coveo for Commerce</a></li>
<li><a href="https://docs.coveo.com/en/1243/">Coveo for Salesforce</a></li>
<li><a href="https://docs.coveo.com/en/1479/">Coveo for ServiceNow</a></li>
<li><a href="https://docs.coveo.com/en/2709/">Coveo for Sitecore</a></li>
</ul>
</button>
</li>
</ul>
</nav>
</div>
</subHeader>
<div class="container container-main">
<div class="row">
<div id="toc-column" class="col-1 col-menu menu-sticky-wrap menu-highlight">
<div id="filter-box-container">
<div id="filter-box-header">Filter</div>
<div id="filter-box-body">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<div class="ctr-box-filter">
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited" title="Display inherited methods and properties"> Inherited</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="filter-box-footer"></div>
</div>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<a id="globals-toc-link" href=../globals.html><b>Globals</b></a>
</ul>
<ul class="current">
<li class="current tsd-kind-coveo-component">
<a href="resultlist.html" class="tsd-kind-icon">Result<wbr>List</a>
<ul>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#buildresult" class="tsd-kind-icon">build<wbr>Result</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#buildresults" class="tsd-kind-icon">build<wbr>Results</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#disable" class="tsd-kind-icon">disable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#displaymoreresults" class="tsd-kind-icon">display<wbr>More<wbr>Results</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#enable" class="tsd-kind-icon">enable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#getautoselectedfieldstoinclude" class="tsd-kind-icon">get<wbr>Auto<wbr>Selected<wbr>Fields<wbr>ToInclude</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#getdisplayedresults" class="tsd-kind-icon">get<wbr>Displayed<wbr>Results</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#getdisplayedresultselements" class="tsd-kind-icon">get<wbr>Displayed<wbr>Results<wbr>Elements</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="resultlist.html#renderresults" class="tsd-kind-icon">render<wbr>Results</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a href="resultlist.html#get" class="tsd-kind-icon">get</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#bind" class="tsd-kind-icon">bind</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#componentoptionsmodel" class="tsd-kind-icon">component<wbr>Options<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#componentstatemodel" class="tsd-kind-icon">component<wbr>State<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#disabled" class="tsd-kind-icon">disabled</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#logger" class="tsd-kind-icon">logger</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#querycontroller" class="tsd-kind-icon">query<wbr>Controller</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#querystatemodel" class="tsd-kind-icon">query<wbr>State<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#root" class="tsd-kind-icon">root</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#searchinterface" class="tsd-kind-icon">search<wbr>Interface</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a href="resultlist.html#id" class="tsd-kind-icon">ID</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="resultlist.html#usageanalytics" class="tsd-kind-icon">usage<wbr>Analytics</a>
</li>
<li class=" tsd-kind-object-literal tsd-parent-kind-coveo-component tsd-is-static">
<a href="resultlist.html#options" class="tsd-kind-icon">options</a>
</li>
<li class=" tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<a href="resultlist.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
<div id="separator"></div>
<div class="col-2 col-content">
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<a id="home-menu-link" class="aui-nav-link" title="Go to the home page" href=..>
<i class="fa fa-home" aria-hidden="true"></i>
</a>
<li>
<a href="../globals.html">Globals</a>
</li>
<li>
<a href="resultlist.html">ResultList</a>
</li>
</ul>
<h1>Coveo ResultList Component (CoveoResultList)</h1>
</div>
</div>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The <code>ResultList</code> component is responsible for displaying query results by applying one or several result templates
(see <a href="https://docs.coveo.com/en/413/">Result Templates</a>).</p>
</div>
<p>It is possible to include multiple <code>ResultList</code> components along with a single <code>ResultLayout</code>
component in a search page to provide different result layouts (see
<a href="https://docs.coveo.com/en/360/">Result Layouts</a>).</p>
<p>This component supports infinite scrolling (see the
<a href="resultlist.html#options.enableinfinitescroll"><code>enableInfiniteScroll</code></a> option).</p>
</div>
</section>
<div class="preview-container tsd-panel">
<div class="overlay"></div>
</div>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#buildresult" class="tsd-kind-icon">build<wbr>Result</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#buildresults" class="tsd-kind-icon">build<wbr>Results</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#disable" class="tsd-kind-icon">disable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#displaymoreresults" class="tsd-kind-icon">display<wbr>More<wbr>Results</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#enable" class="tsd-kind-icon">enable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#getautoselectedfieldstoinclude" class="tsd-kind-icon">get<wbr>Auto<wbr>Selected<wbr>Fields<wbr>ToInclude</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#getdisplayedresults" class="tsd-kind-icon">get<wbr>Displayed<wbr>Results</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#getdisplayedresultselements" class="tsd-kind-icon">get<wbr>Displayed<wbr>Results<wbr>Elements</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="resultlist.html#renderresults" class="tsd-kind-icon">render<wbr>Results</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static"><a href="resultlist.html#get" class="tsd-kind-icon">get</a></li>
</ul>
</section>
<section class="tsd-index-section tsd-is-inherited">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#bind" class="tsd-kind-icon">bind</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#componentoptionsmodel" class="tsd-kind-icon">component<wbr>Options<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#componentstatemodel" class="tsd-kind-icon">component<wbr>State<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#disabled" class="tsd-kind-icon">disabled</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#logger" class="tsd-kind-icon">logger</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#querycontroller" class="tsd-kind-icon">query<wbr>Controller</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#querystatemodel" class="tsd-kind-icon">query<wbr>State<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#root" class="tsd-kind-icon">root</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#searchinterface" class="tsd-kind-icon">search<wbr>Interface</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static"><a href="resultlist.html#id" class="tsd-kind-icon">ID</a></li>
</ul>
</section>
<section class="tsd-index-section tsd-is-inherited">
<h3>Accessors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited"><a href="resultlist.html#usageanalytics" class="tsd-kind-icon">usage<wbr>Analytics</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Component Options</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.autoselectfieldstoinclude" class="tsd-kind-icon">auto<wbr>Select<wbr>Fields<wbr>ToInclude</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.enableinfinitescroll" class="tsd-kind-icon">enable<wbr>Infinite<wbr>Scroll</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.enableinfinitescrollwaitinganimation" class="tsd-kind-icon">enable<wbr>Infinite<wbr>Scroll<wbr>Waiting<wbr>Animation</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.enablescrolltotop" class="tsd-kind-icon">enable<wbr>Scroll<wbr>ToTop</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.fieldstoinclude" class="tsd-kind-icon">fields<wbr>ToInclude</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.infinitescrollcontainer" class="tsd-kind-icon">infinite<wbr>Scroll<wbr>Container</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.infinitescrollpagesize" class="tsd-kind-icon">infinite<wbr>Scroll<wbr>Page<wbr>Size</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.layout" class="tsd-kind-icon">layout</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.resultscontainer" class="tsd-kind-icon">results<wbr>Container</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.waitanimation" class="tsd-kind-icon">wait<wbr>Animation</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="resultlist.html#options.waitanimationcontainer" class="tsd-kind-icon">wait<wbr>Animation<wbr>Container</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite"><a href="resultlist.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="buildresult" class="tsd-anchor"></a>
<h3>build<wbr>Result</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">build<wbr>Result<span class="tsd-signature-symbol">(</span>result<span class="tsd-signature-symbol">: </span><a href="../interfaces/iqueryresult.html" class="tsd-signature-type">IQueryResult</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L448">ui/ResultList/ResultList.ts
:448</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Builds and returns an HTMLElement for the given result.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>result: <a href="../interfaces/iqueryresult.html" class="tsd-signature-type">IQueryResult</a></h5>
<div class="tsd-comment tsd-typography">
<p>the result to build an HTMLElement from.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="buildresults" class="tsd-anchor"></a>
<h3>build<wbr>Results</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">build<wbr>Results<span class="tsd-signature-symbol">(</span>results<span class="tsd-signature-symbol">: </span><a href="../interfaces/iqueryresults.html" class="tsd-signature-type">IQueryResults</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLElement[]</span><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L438">ui/ResultList/ResultList.ts
:438</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Builds and returns an array of HTMLElement with the given result set.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>results: <a href="../interfaces/iqueryresults.html" class="tsd-signature-type">IQueryResults</a></h5>
<div class="tsd-comment tsd-typography">
<p>the result set to build an array of HTMLElement from.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLElement[]</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="debuginfo" class="tsd-anchor"></a>
<h3>debug<wbr>Info</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">debug<wbr>Info<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#debuginfo">debugInfo</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L41">ui/Base/BaseComponent.ts
:41</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Return the debug info about this component.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="disable" class="tsd-anchor"></a>
<h3>disable</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">disable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#disable">disable</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L52">ui/Base/BaseComponent.ts
:52</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>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.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="displaymoreresults" class="tsd-anchor"></a>
<h3>display<wbr>More<wbr>Results</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">display<wbr>More<wbr>Results<span class="tsd-signature-symbol">(</span>count<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a href="../interfaces/iqueryresults.html" class="tsd-signature-type">IQueryResults</a><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L462">ui/ResultList/ResultList.ts
:462</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Executes a query to fetch new results. After the query returns, renders the new results.</p>
</div>
<p>Asserts that there are more results to display by verifying whether the last query has returned as many results as
requested.</p>
<p>Asserts that the <code>ResultList</code> is not currently fetching results.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>count: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>The number of results to fetch and display.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a href="../interfaces/iqueryresults.html" class="tsd-signature-type">IQueryResults</a><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="enable" class="tsd-anchor"></a>
<h3>enable</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">enable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#enable">enable</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L61">ui/Base/BaseComponent.ts
:61</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>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.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getautoselectedfieldstoinclude" class="tsd-anchor"></a>
<h3>get<wbr>Auto<wbr>Selected<wbr>Fields<wbr>ToInclude</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Auto<wbr>Selected<wbr>Fields<wbr>ToInclude<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L387">ui/ResultList/ResultList.ts
:387</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Get the fields needed to be automatically included in the query for this result list.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string[]</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="getbindings" class="tsd-anchor"></a>
<h3>get<wbr>Bindings</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">get<wbr>Bindings<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#getbindings">getBindings</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L328">ui/Base/Component.ts
:328</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Return the bindings, or environment, for the current component.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getdisplayedresults" class="tsd-anchor"></a>
<h3>get<wbr>Displayed<wbr>Results</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Displayed<wbr>Results<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">IQueryResult[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L494">ui/ResultList/ResultList.ts
:494</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Gets the list of currently displayed result.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">IQueryResult[]</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getdisplayedresultselements" class="tsd-anchor"></a>
<h3>get<wbr>Displayed<wbr>Results<wbr>Elements</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Displayed<wbr>Results<wbr>Elements<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L502">ui/ResultList/ResultList.ts
:502</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Gets the list of currently displayed result HTMLElement.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLElement[]</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="renderresults" class="tsd-anchor"></a>
<h3>render<wbr>Results</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">render<wbr>Results<span class="tsd-signature-symbol">(</span>resultElements<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement[]</span>, append<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L424">ui/ResultList/ResultList.ts
:424</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Empties the current result list content and appends the given array of HTMLElement.</p>
</div>
<p>Can append to existing elements in the result list, or replace them.</p>
<p>Triggers the <code>newResultsDisplayed</code> and <code>newResultDisplayed</code> events.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>resultElements: <span class="tsd-signature-type">HTMLElement[]</span></h5>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> append: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a name="get" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagStatic">Static</span> get</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<li class="tsd-signature tsd-kind-icon">get<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span>, componentClass<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span>, noThrow<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#get">get</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L410">ui/Base/Component.ts
:410</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.<br/>
If there is multiple component bound to the current HTMLElement, you must specify the component class.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLElement</span></h5>
<div class="tsd-comment tsd-typography">
<p>HTMLElement for which to get the bound component.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> componentClass: <span class="tsd-signature-type">any</span></h5>
<div class="tsd-comment tsd-typography">
<p>Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> noThrow: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Boolean option to tell the method to not throw on error.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-inherited">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="bind" class="tsd-anchor"></a>
<h3>bind</h3>
<div class="tsd-signature tsd-kind-icon">bind<span class="tsd-signature-symbol">:</span> <a href="../classes/componentevents.html" class="tsd-signature-type">ComponentEvents</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#bind">bind</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L270">ui/Base/Component.ts
:270</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Allows the component to bind events and execute them only when it is enabled.</p>
</div>
<dl class="tsd-comment-tags">
<dt>type</dt>
<dd><p>{Coveo.ComponentEvents}</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="componentoptionsmodel" class="tsd-anchor"></a>
<h3>component<wbr>Options<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">component<wbr>Options<wbr>Model<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ComponentOptionsModel</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#componentoptionsmodel">componentOptionsModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L294">ui/Base/Component.ts
:294</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the state of options for different components. Mainly used by <a href="resultlink.html">ResultLink</a>.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="componentstatemodel" class="tsd-anchor"></a>
<h3>component<wbr>State<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">component<wbr>State<wbr>Model<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ComponentStateModel</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#componentstatemodel">componentStateModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L282">ui/Base/Component.ts
:282</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>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.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="disabled" class="tsd-anchor"></a>
<h3>disabled</h3>
<div class="tsd-signature tsd-kind-icon">disabled<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#disabled">disabled</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L23">ui/Base/BaseComponent.ts
:23</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>A disabled component will not participate in the query, or listen to <a href="../classes/componentevents.html">ComponentEvents</a>.</p>
</div>
<dl class="tsd-comment-tags">
<dt>type</dt>
<dd><p>{boolean}</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="logger" class="tsd-anchor"></a>
<h3>logger</h3>
<div class="tsd-signature tsd-kind-icon">logger<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Logger</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#logger">logger</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L18">ui/Base/BaseComponent.ts
:18</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Allows component to log in the dev console.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="querycontroller" class="tsd-anchor"></a>
<h3>query<wbr>Controller</h3>
<div class="tsd-signature tsd-kind-icon">query<wbr>Controller<span class="tsd-signature-symbol">:</span> <a href="../classes/querycontroller.html" class="tsd-signature-type">QueryController</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#querycontroller">queryController</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L286">ui/Base/Component.ts
:286</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the singleton that allows to trigger queries.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="querystatemodel" class="tsd-anchor"></a>
<h3>query<wbr>State<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">query<wbr>State<wbr>Model<span class="tsd-signature-symbol">:</span> <a href="../classes/querystatemodel.html" class="tsd-signature-type">QueryStateModel</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#querystatemodel">queryStateModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L278">ui/Base/Component.ts
:278</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="root" class="tsd-anchor"></a>
<h3>root</h3>
<div class="tsd-signature tsd-kind-icon">root<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#root">root</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L274">ui/Base/Component.ts
:274</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the root HTMLElement (the <a href="searchinterface.html">SearchInterface</a>).</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="searchinterface" class="tsd-anchor"></a>
<h3>search<wbr>Interface</h3>
<div class="tsd-signature tsd-kind-icon">search<wbr>Interface<span class="tsd-signature-symbol">:</span> <a href="searchinterface.html" class="tsd-signature-type">SearchInterface</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#searchinterface">searchInterface</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L290">ui/Base/Component.ts
:290</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the root of every component, the <a href="searchinterface.html">SearchInterface</a>.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a name="id" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagStatic">Static</span> ID</h3>
<div class="tsd-signature tsd-kind-icon">ID<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#id">ID</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L28">ui/Base/BaseComponent.ts
:28</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The static ID that each component needs in order to be identified.<br/>
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-inherited">
<h2>Accessors</h2>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="usageanalytics" class="tsd-anchor"></a>
<h3>usage<wbr>Analytics</h3>
<ul class="tsd-signatures tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">get</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/ianalyticsclient.html" class="tsd-signature-type">IAnalyticsClient</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#usageanalytics">usageAnalytics</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L343">ui/Base/Component.ts
:343</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the <a href="analytics.html#client">Analytics.client</a>.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/ianalyticsclient.html" class="tsd-signature-type">IAnalyticsClient</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Component Options</h2>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.autoselectfieldstoinclude" class="tsd-anchor"></a>
<h3>auto<wbr>Select<wbr>Fields<wbr>ToInclude</h3>
<div class="tsd-signature tsd-kind-icon">auto<wbr>Select<wbr>Fields<wbr>ToInclude<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L226">ui/ResultList/ResultList.ts
:226</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether the <code>ResultList</code> should scan its result templates to discover which fields it must request to
be able to render all results.</p>
</div>
<p>Setting this option to <code>true</code> ensures that the Coveo Search API does not return fields that are unnecessary for
the UI to function.</p>
<p>If you set this option to <code>true</code>, 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 <a href="resultlist.html#options.fieldstoinclude"><code>fieldsToInclude</code></a> option.</p>
<p><strong>Notes:</strong></p>
<ul>
<li>Many interfaces created with the JavaScript Search Interface Editor explicitly set this option to <code>true</code>.</li>
<li>You cannot set this option to <code>true</code> in the Coveo for Sitecore integration.</li>
</ul>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-auto-select-fields-to-include='true'
data-auto-select-fields-to-include='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enableinfinitescroll" class="tsd-anchor"></a>
<h3>enable<wbr>Infinite<wbr>Scroll</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Infinite<wbr>Scroll<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L161">ui/ResultList/ResultList.ts
:161</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether to automatically retrieve an additional page of results and append it to the
results that the <code>ResultList</code> is currently displaying when the user scrolls down to the bottom of the
<a href="resultlist.html#options.infinitescrollcontainer"><code>infiniteScrollContainer</code></a>.</p>
</div>
<p>See also the <a href="resultlist.html#options.infinitescrollpagesize"><code>infiniteScrollPageSize</code></a> and
<a href="resultlist.html#options.enableinfinitescrollwaitinganimation"><code>enableInfiniteScrollWaitingAnimation</code></a> options.</p>
<p>It is important to specify the <code>infiniteScrollContainer</code> option manually if you want the scrolling element to be
something else than the default <code>window</code> element. Otherwise, you might find yourself in a strange state where the
framework rapidly triggers multiple successive query.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-infinite-scroll='true'
data-enable-infinite-scroll='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enableinfinitescrollwaitinganimation" class="tsd-anchor"></a>
<h3>enable<wbr>Infinite<wbr>Scroll<wbr>Waiting<wbr>Animation</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Infinite<wbr>Scroll<wbr>Waiting<wbr>Animation<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L203">ui/ResultList/ResultList.ts
:203</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether to display the <a href="resultlist.html#options.waitanimation"><code>waitingAnimation</code></a> while fetching additional
results.</p>
</div>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="resultlist.html#options.enableinfinitescroll"><code>enableInfiniteScroll</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-infinite-scroll-waiting-animation='true'
data-enable-infinite-scroll-waiting-animation='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablescrolltotop" class="tsd-anchor"></a>
<h3>enable<wbr>Scroll<wbr>ToTop</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Scroll<wbr>ToTop<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L273">ui/ResultList/ResultList.ts
:273</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether to scroll back to the top of the page when the end-user:</p>
<ul>
<li>interacts with a facet when <a href="resultlist.html#options.infinitescrollcontainer"><code>infiniteScrollContainer</code></a> is set to <code>true</code></li>
<li>interacts with the <a href="pager.html"><code>Pager</code></a> component when <a href="resultlist.html#options.infinitescrollcontainer"><code>infiniteScrollContainer</code></a> is set to <code>false</code></li>
</ul>
</div>
<p><strong>Note:</strong> Setting this option to <code>false</code> has no effect on dynamic facets. To disable this behavior on a <code>DynamicFacet</code> component, you must set its own <a href="dynamicfacet.html#options.enablescrolltotop"><code>enableScrollToTop</code></a> option to <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
<dt>Available since</dt>
<dd><p><a href="https://docs.coveo.com/en/2938/">July 2019 Release (v2.6459)</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-scroll-to-top='true'
data-enable-scroll-to-top='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.fieldstoinclude" class="tsd-anchor"></a>
<h3>fields<wbr>ToInclude</h3>
<div class="tsd-signature tsd-kind-icon">fields<wbr>ToInclude<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">IFieldOption[]</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L244">ui/ResultList/ResultList.ts
:244</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A list of fields to include in the query results.</p>
</div>
<p>If you set the <a href="resultlist.html#options.autoselectfieldstoinclude"><code>autoSelectFieldsToInclude</code></a> option to
<code>true</code>, the Coveo Search API returns the fields you specify for this option (if those fields are available) in
addition to the fields which the <code>ResultList</code> automatically requests. Note that the <code>autoSelectFieldsToInclude</code>
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.</p>
<p>If you set the <a href="resultlist.html#options.autoselectfieldstoinclude"><code>autoSelectFieldsToInclude</code></a> option to
<code>false</code>, the Coveo Search API only returns the fields you specify for this option (if those fields are
available).</p>
<p>If you set the <a href="resultlist.html#options.autoselectfieldstoinclude"><code>autoSelectFieldsToInclude</code></a> option to
<code>false</code> and leave this option undefined, the Coveo Search API returns all available fields.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.infinitescrollcontainer" class="tsd-anchor"></a>
<h3>infinite<wbr>Scroll<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">infinite<wbr>Scroll<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L194">ui/ResultList/ResultList.ts
:194</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>The element that triggers fetching additional results when the end user scrolls down to its bottom.</p>
</div>
<p>You can change the container by specifying its selector (e.g.,
<code>data-infinite-scroll-container-selector='#someCssSelector'</code>).</p>
<p>By default, the framework uses the first vertically scrollable parent element it finds, starting from the
<code>ResultList</code> element itself. A vertically scrollable element is an element whose CSS <code>overflow-y</code> attribute is
<code>scroll</code>.</p>
<p>This implies that if the framework can find no scrollable parent, it uses the <code>window</code> itself as a scrollable
container.</p>
<p>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'.</p>
<p>It is highly recommended that you manually set this option if you wish something else than the <code>window</code> to be the
scrollable element.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="resultlist.html#options.enableinfinitescroll"><code>enableInfiniteScroll</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.infinitescrollpagesize" class="tsd-anchor"></a>
<h3>infinite<wbr>Scroll<wbr>Page<wbr>Size</h3>
<div class="tsd-signature tsd-kind-icon">infinite<wbr>Scroll<wbr>Page<wbr>Size<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L169">ui/ResultList/ResultList.ts
:169</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>The number of additional results to fetch when the user scrolls down to the bottom of the
<a href="resultlist.html#options.infinitescrollcontainer"><code>infiniteScrollContainer</code></a>.</p>
</div>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="resultlist.html#options.enableinfinitescroll"><code>enableInfiniteScroll</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Minimum</dt>
<dd><p><code>1</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>10</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-infinite-scroll-page-size='5'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.layout" class="tsd-anchor"></a>
<h3>layout</h3>
<div class="tsd-signature tsd-kind-icon">layout<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"list"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"card"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"table"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L259">ui/ResultList/ResultList.ts
:259</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the layout to use when displaying results in this <code>ResultList</code> (see
<a href="https://docs.coveo.com/en/360/">Result Layouts</a>). Specifying a value for this option automatically
populates a [<code>ResultLayout</code>]{@link ResultLayout} component with a switcher for the layout.</p>
</div>
<p>For example, if there are two <code>ResultList</code> components in the page, one with its <code>layout</code> set to <code>list</code> and the
other with the same option set to <code>card</code>, then the <code>ResultLayout</code> component will render two buttons respectively
entitled <strong>List</strong> and <strong>Card</strong>.</p>
<p>See the <a href="../globals.html#validlayout"><code>ValidLayout</code></a> type for the list of possible values.</p>
<dl class="tsd-comment-tags">
<dt>Required</dt>
<dd><p>Specifying a value for this option is required for the component to work</p>
</dd>
<dt>Default</dt>
<dd><p><code>list</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-layout='card'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.resultscontainer" class="tsd-anchor"></a>
<h3>results<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">results<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L120">ui/ResultList/ResultList.ts
:120</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The element inside which to insert the rendered result templates.</p>
</div>
<p>Performing a new query clears the content of this element.</p>
<p>You can change the container by specifying its selector (e.g.,
<code>data-result-container-selector='#someCssSelector'</code>).</p>
<p>If you specify no value for this option, a <code>div</code> element will be dynamically created and appended to the result
list. This element will then be used as a result container.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.waitanimation" class="tsd-anchor"></a>
<h3>wait<wbr>Animation</h3>
<div class="tsd-signature tsd-kind-icon">wait<wbr>Animation<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"fade"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"spinner"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"none"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L135">ui/ResultList/ResultList.ts
:135</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>The type of animation to display while waiting for a query to return.</p>
</div>
<p>The possible values are:</p>
<ul>
<li><code>fade</code>: Fades out the current list of results while the query is executing.</li>
<li><code>spinner</code>: Shows a spinning animation while the query is executing.</li>
<li><code>none</code>: Use no animation during queries.</li>
</ul>
<p>See also the <a href="resultlist.html#options.waitanimationcontainer"><code>waitAnimationContainer</code></a> option.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>none</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-wait-animation='spinner'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.waitanimationcontainer" class="tsd-anchor"></a>
<h3>wait<wbr>Animation<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">wait<wbr>Animation<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L145">ui/ResultList/ResultList.ts
:145</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The element inside which to display the <a href="resultlist.html#options.waitanimation"><code>waitAnimation</code></a>.</p>
</div>
<p>You can change this by specifying a CSS selector (e.g.,
<code>data-wait-animation-container-selector='#someCssSelector'</code>).</p>
<p>Defaults to the value of the <a href="resultlist.html#options.resultscontainer"><code>resultsContainer</code></a> option.</p>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<a name="constructor" class="tsd-anchor"></a>
<h3>constructor</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<li class="tsd-signature tsd-kind-icon">new <wbr>Result<wbr>List<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span>, options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">IResultListOptions</span>, bindings<span class="tsd-signature-symbol">?: </span><a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a>, elementClassId<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="resultlist.html" class="tsd-signature-type">ResultList</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Overwrites <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#constructor">constructor</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/ResultList/ResultList.ts#L293">ui/ResultList/ResultList.ts
:293</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Creates a new <code>ResultList</code> component. Binds various event related to queries (e.g., on querySuccess ->
renderResults). Binds scroll event if the <a href="resultlist.html#options.enableinfinitescroll"><code>enableInfiniteScroll</code></a>
option is <code>true</code>.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLElement</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The HTMLElement on which to instantiate the component.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">IResultListOptions</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The options for the <code>ResultList</code> component.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> bindings: <a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The bindings that the component requires to function normally. If not set, these will be
automatically resolved (with a slower execution time).</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> elementClassId: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = ResultList.ID</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The class that this component should instantiate. Components that extend the base ResultList
use this. Default value is <code>CoveoResultList</code>.</p>
</div>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="resultlist.html" class="tsd-signature-type">ResultList</a></h4>
</li>
</ul>
</section>
</section>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer> </div>
</div>
</div>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/generateMetaData.js"></script>
</body>
</html>