coveo-search-ui
Version:
Coveo JavaScript Search Framework
840 lines • 63.4 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Recommendation | 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="recommendation.html" class="tsd-kind-icon">Recommendation</a>
<ul>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#attachcomponent" class="tsd-kind-icon">attach<wbr>Component</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.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="recommendation.html#detachcomponent" class="tsd-kind-icon">detach<wbr>Component</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#detachcomponentsinside" class="tsd-kind-icon">detach<wbr>Components<wbr>Inside</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#disable" class="tsd-kind-icon">disable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#enable" class="tsd-kind-icon">enable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-has-type-parameter tsd-is-inherited">
<a href="recommendation.html#getcomponents" class="tsd-kind-icon">get<wbr>Components</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#getquerycontext" class="tsd-kind-icon">get<wbr>Query<wbr>Context</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#disabled" class="tsd-kind-icon">disabled</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#logger" class="tsd-kind-icon">logger</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="recommendation.html#responsivecomponents" class="tsd-kind-icon">responsive<wbr>Components</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a href="recommendation.html#id" class="tsd-kind-icon">ID</a>
</li>
<li class=" tsd-kind-object-literal tsd-parent-kind-coveo-component tsd-is-overwrite tsd-is-static">
<a href="recommendation.html#options" class="tsd-kind-icon">options</a>
</li>
<li class=" tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<a href="recommendation.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="recommendation.html">Recommendation</a>
</li>
</ul>
<h1>Coveo Recommendation Component (CoveoRecommendation)</h1>
</div>
</div>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>The Recommendation component is a <a href="searchinterface.html">SearchInterface</a> that displays recommendations typically based on user
history.</p>
</div>
<p>This component usually listens to the main SearchInterface. When the main SearchInterface generates a query, the
Recommendation component generates another query to get the recommendations at the same time.</p>
<p>To get history-based recommendations, you will likely want to include the <code>pageview</code> script in your page (see
<a href="https://github.com/coveo/coveo.analytics.js">coveo.analytics.js</a>). However, including this script is not mandatory.
For instance, you could use the Recommendation component without the Coveo Machine Learning service to create a
simple "recommended people" interface.</p>
<p>It is possible to include this component inside another SearchInterface, but it is also possible to instantiate it as
a "standalone" search interface, without even instantiating a main SearchInterface component. In any case, a
Recommendation component always acts as a full-fledged search interface. Therefore, you can include any component
inside the Recommendation component (Searchbox, Facet, Sort, etc.), just as you would inside the main SearchInterface
component.</p>
<dl class="tsd-comment-tags">
<dt>Available since</dt>
<dd><p><a href="https://docs.coveo.com/en/309/#july-2016-release-v166724">July 2016 Release (v1.667.24)</a></p>
</dd>
</dl>
</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 tsd-is-inherited">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#attachcomponent" class="tsd-kind-icon">attach<wbr>Component</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.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="recommendation.html#detachcomponent" class="tsd-kind-icon">detach<wbr>Component</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#detachcomponentsinside" class="tsd-kind-icon">detach<wbr>Components<wbr>Inside</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#disable" class="tsd-kind-icon">disable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#enable" class="tsd-kind-icon">enable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-has-type-parameter tsd-is-inherited"><a href="recommendation.html#getcomponents" class="tsd-kind-icon">get<wbr>Components</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#getquerycontext" class="tsd-kind-icon">get<wbr>Query<wbr>Context</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="recommendation.html#disabled" class="tsd-kind-icon">disabled</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#logger" class="tsd-kind-icon">logger</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="recommendation.html#responsivecomponents" class="tsd-kind-icon">responsive<wbr>Components</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static"><a href="recommendation.html#id" class="tsd-kind-icon">ID</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="recommendation.html#options.dropdownheaderlabel" class="tsd-kind-icon">dropdown<wbr>Header<wbr>Label</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.enableresponsivemode" class="tsd-kind-icon">enable<wbr>Responsive<wbr>Mode</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.hideifnoresults" class="tsd-kind-icon">hide<wbr>IfNo<wbr>Results</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.id-1" class="tsd-kind-icon">id</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.mainsearchinterface" class="tsd-kind-icon">main<wbr>Search<wbr>Interface</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.optionstouse" class="tsd-kind-icon">options<wbr>ToUse</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.responsivebreakpoint" class="tsd-kind-icon">responsive<wbr>Breakpoint</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.sendactionshistory" class="tsd-kind-icon">send<wbr>Actions<wbr>History</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="recommendation.html#options.usercontext" class="tsd-kind-icon">user<wbr>Context</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="recommendation.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-inherited">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="attachcomponent" class="tsd-anchor"></a>
<h3>attach<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">attach<wbr>Component<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, component<span class="tsd-signature-symbol">: </span><a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a><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="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#attachcomponent">attachComponent</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L616">ui/SearchInterface/SearchInterface.ts
:616</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Attaches a component to the search interface. This allows the search interface to easily list and iterate over its
components.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>type: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Normally, the component type is a unique identifier without the <code>Coveo</code> prefix (e.g., <code>CoveoFacet</code> ->
<code>Facet</code>, <code>CoveoPager</code> -> <code>Pager</code>, <code>CoveoQuerybox</code> -> <code>Querybox</code>, etc.).</p>
</div>
</li>
<li>
<h5>component: <a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></h5>
<div class="tsd-comment tsd-typography">
<p>The component instance to attach.</p>
</div>
</li>
</ul>
<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 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="detachcomponent" class="tsd-anchor"></a>
<h3>detach<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">detach<wbr>Component<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, component<span class="tsd-signature-symbol">: </span><a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a><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="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#detachcomponent">detachComponent</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L626">ui/SearchInterface/SearchInterface.ts
:626</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Detaches a component from the search interface.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>type: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Normally, the component type is a unique identifier without the <code>Coveo</code> prefix (e.g., <code>CoveoFacet</code> ->
<code>Facet</code>, <code>CoveoPager</code> -> <code>Pager</code>, <code>CoveoQuerybox</code> -> <code>Querybox</code>, etc.).</p>
</div>
</li>
<li>
<h5>component: <a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></h5>
<div class="tsd-comment tsd-typography">
<p>The component instance to detach.</p>
</div>
</li>
</ul>
<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 tsd-is-inherited">
<a name="detachcomponentsinside" class="tsd-anchor"></a>
<h3>detach<wbr>Components<wbr>Inside</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">detach<wbr>Components<wbr>Inside<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</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="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#detachcomponentsinside">detachComponentsInside</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L713">ui/SearchInterface/SearchInterface.ts
:713</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Detaches from the SearchInterface every component that is inside the given element.</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>
</li>
</ul>
<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 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 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 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><span class="tsd-signature-type">object</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#getbindings">getBindings</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L638">ui/SearchInterface/SearchInterface.ts
:638</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the bindings, or environment, for the current component.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">object</span></h4>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-has-type-parameter tsd-is-inherited">
<a name="getcomponents" class="tsd-anchor"></a>
<h3>get<wbr>Components</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-has-type-parameter tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">get<wbr>Components<T><span class="tsd-signature-symbol">(</span>type<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><span class="tsd-signature-type">T[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#getcomponents">getComponents</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L692">ui/SearchInterface/SearchInterface.ts
:692</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Gets all the components of a given type.</p>
</div>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T</h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>type: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Normally, the component type is a unique identifier without the <code>Coveo</code> prefix (e.g., <code>CoveoFacet</code> ->
<code>Facet</code>, <code>CoveoPager</code> -> <code>Pager</code>, <code>CoveoQuerybox</code> -> <code>Querybox</code>, etc.).</p>
</div>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">T[]</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="getquerycontext" class="tsd-anchor"></a>
<h3>get<wbr>Query<wbr>Context</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>Query<wbr>Context<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../globals.html#context" class="tsd-signature-type">Context</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#getquerycontext">getQueryContext</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L664">ui/SearchInterface/SearchInterface.ts
:664</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Gets the query context for the current search interface.</p>
</div>
<p>If the search interface has performed at least one query, it will try to resolve the context from the last query sent to the Coveo Search API.</p>
<p>If the search interface has not performed a query yet, it will try to resolve the context from any avaiable <a href="pipelinecontext.html">PipelineContext</a> component.</p>
<p>If multiple <a href="pipelinecontext.html">PipelineContext</a> components are available, it will merge all context values together.</p>
<p><strong>Note:</strong>
Having multiple PipelineContext components in the same search interface is not recommended, especially if some context keys are repeated across those components.</p>
<p>If no context is found, returns <code>undefined</code></p>
</div>
<h4 class="tsd-returns-title">Returns <a href="../globals.html#context" class="tsd-signature-type">Context</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="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="responsivecomponents" class="tsd-anchor"></a>
<h3>responsive<wbr>Components</h3>
<div class="tsd-signature tsd-kind-icon">responsive<wbr>Components<span class="tsd-signature-symbol">:</span> <a href="../classes/responsivecomponents.html" class="tsd-signature-type">ResponsiveComponents</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="searchinterface.html">SearchInterface</a>.<a href="searchinterface.html#responsivecomponents">responsiveComponents</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L528">ui/SearchInterface/SearchInterface.ts
:528</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Allows to get and set the different breakpoints for mobile and tablet devices.</p>
</div>
<p>This is useful, amongst other, for <a href="facet.html">Facet</a>, <a href="tab.html">Tab</a> and <a href="resultlist.html">ResultList</a></p>
</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 ">
<h2>Component Options</h2>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.dropdownheaderlabel" class="tsd-anchor"></a>
<h3>dropdown<wbr>Header<wbr>Label</h3>
<div class="tsd-signature tsd-kind-icon">dropdown<wbr>Header<wbr>Label<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Recommendation/Recommendation.ts#L196">ui/Recommendation/Recommendation.ts
:196</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>If <a href="recommendation.html#options.enableresponsivemode">Recommendation.options.enableResponsiveMode</a> is <code>true</code> for all Recommendation components, specifies the
label of the dropdown button that allows to display the Recommendation components when in responsive mode.</p>
</div>
<p>If more than one Recommendation component in the search interface specifies a value for this option, then the
framework uses the first occurrence of the option.</p>
<p>Default value is <code>Recommendations</code>.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-dropdown-header-label='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enableresponsivemode" class="tsd-anchor"></a>
<h3>enable<wbr>Responsive<wbr>Mode</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Responsive<wbr>Mode<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/Recommendation/Recommendation.ts#L169">ui/Recommendation/Recommendation.ts
:169</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to enable <em>responsive mode</em> for Recommendation components. Setting this options to <code>false</code> on
any Recommendation component in a search interface disables responsive mode for all other Recommendation
components in the search interface.</p>
</div>
<p>Responsive mode displays all Recommendation components under a single dropdown button whenever the width of the
HTML element which the search interface is bound to reaches or falls behind a certain threshold (see
<a href="recommendation.html#options.responsivebreakpoint">Recommendation.options.responsiveBreakpoint</a>).</p>
<p>See also <a href="recommendation.html#options.dropdownheaderlabel">Recommendation.options.dropdownHeaderLabel</a>.</p>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<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-responsive-mode='true'
data-enable-responsive-mode='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.hideifnoresults" class="tsd-anchor"></a>
<h3>hide<wbr>IfNo<wbr>Results</h3>
<div class="tsd-signature tsd-kind-icon">hide<wbr>IfNo<wbr>Results<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/Recommendation/Recommendation.ts#L146">ui/Recommendation/Recommendation.ts
:146</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to hide the Recommendations component if no result or recommendation is available.</p>
</div>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<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-hide-if-no-results='true'
data-hide-if-no-results='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.id-1" class="tsd-anchor"></a>
<h3>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">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Recommendation/Recommendation.ts#L100">ui/Recommendation/Recommendation.ts
:100</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the ID of the interface.
The usage analytics use the interface ID to know which recommendation interface was selected.</p>
</div>
<p>Default value is <code>Recommendation</code> for the first one and <code>Recommendation_{number}</code>, where {number} depends on the
number of Recommendation interfaces with default IDs in the page for the others.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-id='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.mainsearchinterface" class="tsd-anchor"></a>
<h3>main<wbr>Search<wbr>Interface</h3>
<div class="tsd-signature tsd-kind-icon">main<wbr>Search<wbr>Interface<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/Recommendation/Recommendation.ts#L85">ui/Recommendation/Recommendation.ts
:85</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the main <a href="searchinterface.html">SearchInterface</a> to listen to.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.optionstouse" class="tsd-anchor"></a>
<h3>options<wbr>ToUse</h3>
<div class="tsd-signature tsd-kind-icon">options<wbr>ToUse<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">("expression" | "advancedExpression" | "constantExpression" | "disjunctionExpression")[]</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Recommendation/Recommendation.ts#L119">ui/Recommendation/Recommendation.ts
:119</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies which options from the main <a href="../classes/querybuilder.html">QueryBuilder</a> to use in the triggered query.</p>
</div>
<p>Possible values are:</p>
<ul>
<li><code>expression</code></li>
<li><code>advancedExpression</code></li>
<li><code>constantExpression</code></li>
<li><code>disjunctionExpression</code></li>
</ul>
<p><strong>Example:</strong></p>
<p>Adding the expression (<code>q</code>) and the advanced expression (<code>aq</code>) parts of the main query in the triggered query:</p>
<p><code>data-options-to-use="expression,advancedExpression"</code></p>
<p>Default value