coveo-search-ui
Version:
Coveo JavaScript Search Framework
1,624 lines • 95.3 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SearchInterface | 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="searchinterface.html" class="tsd-kind-icon">Search<wbr>Interface</a>
<ul>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="searchinterface.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="searchinterface.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="searchinterface.html#detachcomponent" class="tsd-kind-icon">detach<wbr>Component</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="searchinterface.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="searchinterface.html#disable" class="tsd-kind-icon">disable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="searchinterface.html#enable" class="tsd-kind-icon">enable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="searchinterface.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">
<a href="searchinterface.html#getcomponents" class="tsd-kind-icon">get<wbr>Components</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="searchinterface.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="searchinterface.html#disabled" class="tsd-kind-icon">disabled</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="searchinterface.html#logger" class="tsd-kind-icon">logger</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component">
<a href="searchinterface.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="searchinterface.html#id" class="tsd-kind-icon">ID</a>
</li>
<li class=" tsd-kind-object-literal tsd-parent-kind-coveo-component tsd-is-static">
<a href="searchinterface.html#options" class="tsd-kind-icon">options</a>
</li>
<li class=" tsd-kind-constructor tsd-parent-kind-coveo-component">
<a href="searchinterface.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="searchinterface.html">SearchInterface</a>
</li>
</ul>
<h1>Coveo SearchInterface Component (CoveoSearchInterface)</h1>
</div>
</div>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The SearchInterface component is the root and main component of your Coveo search interface. You should place all
other Coveo components inside the SearchInterface component.</p>
</div>
<p>It is also on the HTMLElement of the SearchInterface component that you call the <a href="../globals.html#init">init</a> function.</p>
<p>It is advisable to specify a unique HTML <code>id</code> attribute for the SearchInterface component in order to be able to
reference it easily.</p>
<p><strong>Example:</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">head</span>></span>
[ ... ]
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
[ ... ]
<span class="hljs-comment">// The init function is called on the SearchInterface element, in this case, the body of the page.</span>
Coveo.init(<span class="hljs-built_in">document</span>.body);
[ ... ]
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
[ ... ]
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-comment"><!-- Specifying a unique HTML id attribute for the SearchInterface component is good practice. --></span>
<span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'search'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoSearchInterface'</span> [ <span class="hljs-attr">...</span> <span class="hljs-attr">other</span> <span class="hljs-attr">options</span> <span class="hljs-attr">...</span> ]></span>
[ ... ]
<span class="hljs-comment"><!-- You should place all other Coveo components here, inside the SearchInterface component. --></span>
[ ... ]
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
</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="searchinterface.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="searchinterface.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="searchinterface.html#detachcomponent" class="tsd-kind-icon">detach<wbr>Component</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="searchinterface.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="searchinterface.html#disable" class="tsd-kind-icon">disable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="searchinterface.html#enable" class="tsd-kind-icon">enable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="searchinterface.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"><a href="searchinterface.html#getcomponents" class="tsd-kind-icon">get<wbr>Components</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="searchinterface.html#getquerycontext" class="tsd-kind-icon">get<wbr>Query<wbr>Context</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="searchinterface.html#disabled" class="tsd-kind-icon">disabled</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="searchinterface.html#logger" class="tsd-kind-icon">logger</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component"><a href="searchinterface.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="searchinterface.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="searchinterface.html#options.allowquerieswithoutkeywords" class="tsd-kind-icon">allow<wbr>Queries<wbr>Without<wbr>Keywords</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.autotriggerquery" class="tsd-kind-icon">auto<wbr>Trigger<wbr>Query</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enableautomaticresponsivemode" class="tsd-kind-icon">enable<wbr>Automatic<wbr>Responsive<wbr>Mode</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enablecollaborativerating" class="tsd-kind-icon">enable<wbr>Collaborative<wbr>Rating</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enabledebuginfo" class="tsd-kind-icon">enable<wbr>Debug<wbr>Info</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enableduplicatefiltering" class="tsd-kind-icon">enable<wbr>Duplicate<wbr>Filtering</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enablehistory" class="tsd-kind-icon">enable<wbr>History</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.enablescrollrestoration" class="tsd-kind-icon">enable<wbr>Scroll<wbr>Restoration</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.excerptlength" class="tsd-kind-icon">excerpt<wbr>Length</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.expression" class="tsd-kind-icon">expression</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.filterfield" class="tsd-kind-icon">filter<wbr>Field</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.firstloadinganimation" class="tsd-kind-icon">first<wbr>Loading<wbr>Animation</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.hideuntilfirstquery" class="tsd-kind-icon">hide<wbr>Until<wbr>First<wbr>Query</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.maximumage" class="tsd-kind-icon">maximum<wbr>Age</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.modalcontainer" class="tsd-kind-icon">modal<wbr>Container</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.pipeline" class="tsd-kind-icon">pipeline</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.responsivemediumbreakpoint" class="tsd-kind-icon">responsive<wbr>Medium<wbr>Breakpoint</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.responsivemode" class="tsd-kind-icon">responsive<wbr>Mode</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.responsivesmallbreakpoint" class="tsd-kind-icon">responsive<wbr>Small<wbr>Breakpoint</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.resultsperpage" class="tsd-kind-icon">results<wbr>Per<wbr>Page</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.searchpageuri" class="tsd-kind-icon">search<wbr>Page<wbr>Uri</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.timezone" class="tsd-kind-icon">timezone</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="searchinterface.html#options.uselocalstorageforhistory" class="tsd-kind-icon">use<wbr>Local<wbr>Storage<wbr>For<wbr>History</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"><a href="searchinterface.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="attachcomponent" class="tsd-anchor"></a>
<h3>attach<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<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">
<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">
<a name="detachcomponent" class="tsd-anchor"></a>
<h3>detach<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<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">
<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">
<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">
<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">
<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">
<a name="getbindings" class="tsd-anchor"></a>
<h3>get<wbr>Bindings</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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 ">
<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">
<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">
<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.allowquerieswithoutkeywords" class="tsd-anchor"></a>
<h3>allow<wbr>Queries<wbr>Without<wbr>Keywords</h3>
<div class="tsd-signature tsd-kind-icon">allow<wbr>Queries<wbr>Without<wbr>Keywords<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/SearchInterface/SearchInterface.ts#L337">ui/SearchInterface/SearchInterface.ts
:337</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies if the search interface should perform queries when no keywords are entered by the end user.</p>
</div>
<p>When this option is set to true, the interface will initially only load with the search box, as long as you have a search box component in your interface.</p>
<p>Once the user submits a query, the full search interface loads to display the results.</p>
<p>When using the Coveo for Salesforce Free edition, this option is automatically set to false, and should not be changed.</p>
<p>This option interacts closely with the <a href="searchinterface.html#options.autotriggerquery">SearchInterface.options.autoTriggerQuery</a> option, as the automatic query is not triggered when there are no keywords.</p>
<p>It also modifies the <a href="../interfaces/iquery.html#allowquerieswithoutkeywords">IQuery.allowQueriesWithoutKeywords</a> query parameter.</p>
<p>Default value is <code>true</code>, except in Coveo for Salesforce Free edition in which it is <code>false</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-allow-queries-without-keywords='true'
data-allow-queries-without-keywords='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.autotriggerquery" class="tsd-anchor"></a>
<h3>auto<wbr>Trigger<wbr>Query</h3>
<div class="tsd-signature tsd-kind-icon">auto<wbr>Trigger<wbr>Query<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/SearchInterface/SearchInterface.ts#L321">ui/SearchInterface/SearchInterface.ts
:321</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to trigger the first query automatically when the page finishes loading.</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-auto-trigger-query='true'
data-auto-trigger-query='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enableautomaticresponsivemode" class="tsd-anchor"></a>
<h3>enable<wbr>Automatic<wbr>Responsive<wbr>Mode</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Automatic<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/SearchInterface/SearchInterface.ts#L179">ui/SearchInterface/SearchInterface.ts
:179</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to enable automatic responsive mode (i.e., automatically placing <a href="facet.html">Facet</a> and <a href="tab.html">Tab</a>
components in dropdown menus under the search box when the width of the SearchInterface HTML element reaches or
falls behind a certain pixel threshold).</p>
</div>
<p>You might want to set this option to <code>false</code> if automatic responsive mode does not suit the specific design needs
of your implementation.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>If this option is <code>true</code>, you can also specify whether to enable responsive mode for Facet components (see
{@link Facet.options.enableResponsiveMode}) and for Tab components (see
<a href="tab.html#options.enableresponsivemode">Tab.options.enableResponsiveMode</a>).</p>
<p>In addition, you can specify the label you wish to display on the dropdown buttons (see
{@link Facet.options.dropdownHeaderLabel} and <a href="tab.html#options.dropdownheaderlabel">Tab.options.dropdownHeaderLabel</a>).</p>
</blockquote>
<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-automatic-responsive-mode='true'
data-enable-automatic-responsive-mode='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablecollaborativerating" class="tsd-anchor"></a>
<h3>enable<wbr>Collaborative<wbr>Rating</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Collaborative<wbr>Rating<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/SearchInterface/SearchInterface.ts#L377">ui/SearchInterface/SearchInterface.ts
:377</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p><strong>Note:</strong></p>
</div>
<blockquote>
<p>The Coveo Cloud V2 platform does not support collaborative rating. Therefore, this option is obsolete in Coveo Cloud V2.</p>
</blockquote>
<p>Specifies whether to enable collaborative rating, which you can leverage using the
<a href="resultrating.html"><code>ResultRating</code></a> component.</p>
<p>Setting this option to <code>true</code> has no effect unless collaborative rating is also enabled on your Coveo index.</p>
<p>Default value is <code>false</code>.</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-collaborative-rating='true'
data-enable-collaborative-rating='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enabledebuginfo" class="tsd-anchor"></a>
<h3>enable<wbr>Debug<wbr>Info</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Debug<wbr>Info<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/SearchInterface/SearchInterface.ts#L363">ui/SearchInterface/SearchInterface.ts
:363</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to enable the feature that allows the end user to ALT + double click any result to open a debug
page with detailed information about all properties and fields for that result.</p>
</div>
<p>Enabling this feature causes no security concern; the entire debug information is always visible to the end user
through the browser developer console or by calling the Coveo API directly.</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-debug-info='true'
data-enable-debug-info='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enableduplicatefiltering" class="tsd-anchor"></a>
<h3>enable<wbr>Duplicate<wbr>Filtering</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Duplicate<wbr>Filtering<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/SearchInterface/SearchInterface.ts#L388">ui/SearchInterface/SearchInterface.ts
:388</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether to filter out duplicates, so that items resembling one another only appear once in the query results.</p>
</div>
<p><strong>Notes:</strong></p>
<ul>
<li>Two items must be at least 85% similar to one another to be considered duplicates.</li>
<li>When a pair of duplicates is found, only the higher-ranked item of the two is kept in the result set.</li>
<li>Enabling this feature can make the total result count less precise, as only the requested page of query results is submitted to duplicate filtering.</li>
<li>This option can also be explicitly set on the <a href="tab.html"><code>Tab</code></a> component. When this is the case, the <code>Tab</code> configuration prevails.</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-enable-duplicate-filtering='true'
data-enable-duplicate-filtering='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablehistory" class="tsd-anchor"></a>
<h3>enable<wbr>History</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>History<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/SearchInterface/SearchInterface.ts#L158">ui/SearchInterface/SearchInterface.ts
:158</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Whether to allow the end user to navigate search history using the <strong>Back</strong> and <strong>Forward</strong> buttons
of the browser.</p>
</div>
<p>If this option is set to <code>true</code>, the state of the current query will be saved in the hash portion
of the URL when the user submits the query.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>If the <code>enableHistory</code> option is <code>true</code> and the current query is <code>foobar</code>, the SearchInterface component
saves <code>q=foobar</code> in the URL hash when the user submits the query.</p>
</blockquote>
<p><strong>Note:</strong> Avoid setting this option to <code>true</code> on a search interface that relates to a Coveo for Salesforce Full Search or Insight Panel component, otherwise the component won't initialize correctly.</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-history='true'
data-enable-history='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablescrollrestoration" class="tsd-anchor"></a>
<h3>enable<wbr>Scroll<wbr>Restoration</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Scroll<wbr>Restoration<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/SearchInterface/SearchInterface.ts#L488">ui/SearchInterface/SearchInterface.ts
:488</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to restore the last scroll position when navigating back
to the search interface.</p>
</div>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
<dt>Available since</dt>
<dd><p><a href="https://docs.coveo.com/en/3203/">March 2020 Release (v2.8521)</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-scroll-restoration='true'
data-enable-scroll-restoration='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.excerptlength" class="tsd-anchor"></a>
<h3>excerpt<wbr>Length</h3>
<div class="tsd-signature tsd-kind-icon">excerpt<wbr>Length<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/SearchInterface/SearchInterface.ts#L212">ui/SearchInterface/SearchInterface.ts
:212</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the number of characters to get at query time to create an excerpt of the result.</p>
</div>
<p>This setting is global and cannot be modified on a per-result basis.</p>
<p>See also the <a href="excerpt.html">Excerpt</a> component.</p>
<p>Default value is <code>200</code>. Minimum value is <code>0</code>.</p>
<dl class="tsd-comment-tags">
<dt>Minimum</dt>
<dd><p><code>0</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>200</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-excerpt-length='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.expression" class="tsd-anchor"></a>
<h3>expression</h3>
<div class="tsd-signature tsd-kind-icon">expression<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/SearchInterface/SearchInterface.ts#L229">ui/SearchInterface/SearchInterface.ts
:229</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies an expression to add to each query.</p>
</div>
<p>You might want to use this options to add a global filter to your entire search interface that applies for all
tabs.</p>
<p>You should not use this option to address security concerns (it is JavaScript, after all).</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>It also is possible to set this option separately for each <a href="tab.html">Tab</a> component
(see <a href="tab.html#options.expression">Tab.options.expression</a>).</p>
</blockquote>
<p>Default value is <code>''</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code></code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-expression='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.filterfield" class="tsd-anchor"></a>
<h3>filter<wbr>Field</h3>
<div class="tsd-signature tsd-kind-icon">filter<wbr>Field<span class="tsd-signature-symbol">:</span> <a href="../interfaces/ifieldoption.html" class="tsd-signature-type">IFieldOption</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L246">ui/SearchInterface/SearchInterface.ts
:246</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the name of a field to use as a custom filter when executing the query (also referred to as
"folding").</p>
</div>
<p>Setting a value for this option causes the index to return only one result having any particular value inside the
filter field. Any other matching result is "folded" inside the childResults member of each JSON query result.</p>
<p>This feature is typically useful with threaded conversations to include only one top-level result per
conversation. Thus, the field you specify for this option will typically be value unique to each thread that is
shared by all items (e.g., posts, emails, etc) in the thread.</p>
<p>For more advanced features, see the <a href="folding.html">Folding</a> component.</p>
<p>Default value is the empty string (<code>''</code>).</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code></code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-filter-field='@foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.firstloadinganimation" class="tsd-anchor"></a>
<h3>first<wbr>Loading<wbr>Animation</h3>
<div class="tsd-signature tsd-kind-icon">first<wbr>Loading<wbr>Animation<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/SearchInterface/SearchInterface.ts#L312">ui/SearchInterface/SearchInterface.ts
:312</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the animation that you wish to display while your interface is loading.</p>
</div>
<p>You can either specify the CSS selector of an HTML element that matches the default CSS class
(<code>coveo-first-loading-animation</code>), or add <code>-selector</code> to the markup attribute of this option to specify the CSS
selector of an HTML element that matches any CSS class.</p>
<p>See also the <a href="searchinterface.html#options.hideuntilfirstquery">hideUntilFirstQuery</a> option.</p>
<p><strong>Examples:</strong></p>
<p>In this first case, the SearchInterface uses the HTML element whose <code>id</code> attribute is <code>MyAnimation</code> as the
loading animation only if the <code>class</code> attribute of this element also matches <code>coveo-first-loading-animation</code>.
Default loading animation CSS, which you can customize as you see fit, applies to this HTML element.</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoSearchInterface'</span> <span class="hljs-attr">data-first-loading-animation</span>=<span class="hljs-string">'#MyAnimation'</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'MyAnimation'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'coveo-first-loading-animation'</span>></span>
<span class="hljs-comment"><!-- ... --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- ... --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>In this second case, the SearchInterface uses the HTML element whose <code>id</code> attribute is <code>MyAnimation</code> as the
loading animation no matter what CSS class it matches. However, if the <code>class</code> attribute of the HTML element does
not match <code>coveo-first-loading-animation</code>, no default loading animation CSS applies to this HTML element.
Normally, you should only use <code>data-first-loading-animation-selector</code> if you want to completely override the
default loading animation CSS.</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoSearchInterface'</span> <span class="hljs-attr">data-first-loading-animation-selector</span>=<span class="hljs-string">'#MyAnimation'</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'MyAnimation'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'my-custom-loading-animation-class'</span>></span>
<span class="hljs-comment"><!-- ... --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- ... --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>By default, the loading animation is a Coveo CSS animation (which you can customize with CSS).</p>
<dl class="tsd-comment-tags">
<dt>deprecated</dt>
<dd><p>This option is exposed for legacy reasons. Since the
<a href="https://docs.coveo.com/en/432/">July 2017 Release (v2.2900.23)</a>, the loading animation is composed of
placeholders, making this option is obsolete.</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.hideuntilfirstquery" class="tsd-anchor"></a>
<h3>hide<wbr>Until<wbr>First<wbr>Query</h3>
<div class="tsd-signature tsd-kind-icon">hide<wbr>Until<wbr>First<wbr>Query<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/SearchInterface/SearchInterface.ts#L265">ui/SearchInterface/SearchInterface.ts
:265</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to display a loading animation before the first query successfully returns.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>If you do not set this options to <code>false</code>, the loading animation will still run until the first query
successfully returns even if the <a href="searchinterface.html#options.autotriggerquery">autoTriggerQuery</a> option is
<code>false</code>.</p>
</blockquote>
<p>See also the <a href="searchinterface.html#options.firstloadinganimation">firstLoadingAnimation</a> option.</p>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>deprecated</dt>
<dd><p>This option is exposed for legacy reasons. Since the
<a href="https://docs.coveo.com/en/432/">July 2017 Release (v2.2900.23)</a>, the loading animation is composed of
placeholders, making this option is obsolete.</p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-hide-until-first-query='true'
data-hide-until-first-query='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.maximumage" class="tsd-anchor"></a>
<h3>maximum<wbr>Age</h3>
<div class="tsd-signature tsd-kind-icon">maximum<wbr>Age<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/SearchInterface/SearchInterface.ts#L425">ui/SearchInterface/SearchInterface.ts
:425</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the maximum age (in milliseconds) that cached query results can have to still be usable as results
instead of performing a new query on the index. The cache is located in the Coveo Search API (which resides
between the index and the search interface).</p>
</div>
<p>If cached results that are older than the age you specify in this option are available, the framework will not
use these results; it will rather perform a new query on the index.</p>
<p>On high-volume public web sites, specifying a higher value for this option can greatly improve query response
time at the cost of result freshness.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>It also is possible to set this option separately for each <a href="tab.html">Tab</a> component
(see <a href="tab.html#options.maximumage">Tab.options.maximumAge</a>).</p>
</blockquote>
<p>Default value is <code>undefined</code>, which means that the search interface lets the Coveo Search API determine the
maximum cache age. This is typically equivalent to 30 minutes (see
<a href="https://docs.coveo.com/en/13#operation/searchUsingPost-maximumAge">maximumAge</a>).</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-maximum-age='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.modalcontainer" class="tsd-anchor"></a>
<h3>modal<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">modal<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/SearchInterface/SearchInterface.ts#L510">ui/SearchInterface/SearchInterface.ts
:510</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the HTMLElement to which Modals components of the search interface will be attached to. You can
either specify a CSS selector or pass an HTMLElement in the options when calling Coveo.init.</p>
</div>
<p>Default value is <code>element.ownerDocument.body</code>.</p>
<p><strong>Example in attribute:</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"CoveoSearchInterface"</span> <span class="hljs-attr">data-modal-container</span>=<span class="hljs-string">"#my-modal-container"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p><strong>Example in init options:</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> myContainer = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'my-modal-container'</span>);
Coveo.init(root, {
<span class="hljs-attr">SearchInterface</span>: {
<span class="hljs-attr">modalContainer</span>: myContainer
}
});
</code></pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.pipeline" class="tsd-anchor"></a>
<h3>pipeline</h3>
<div class="tsd-signature tsd-kind-icon">pipeline<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/SearchInterface/SearchInterface.ts#L403">ui/SearchInterface/SearchInterface.ts
:403</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the name of the query pipeline to use for the queries.</p>
</div>
<p>You can specify a value for this option if your index is in a Coveo Cloud organization in which pipelines have
been created (see <a href="https://docs.coveo.com/en/1791/">Adding and Managing Query Pipelines</a>).</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>It also is possible to set this option separately for each <a href="tab.html">Tab</a> component
(see <a href="tab.html#options.pipeline">Tab.options.pipeline</a>).</p>
</blockquote>
<p>Default value is <code>undefined</code>, which means that the search interface uses the default pipeline.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-pipeline='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.responsivemediumbreakpoint" class="tsd-anchor"></a>
<h3>responsive<wbr>Medium<wbr>Breakpoint</h3>
<div class="tsd-signature tsd-kind-icon">responsive<wbr>Medium<wbr>Breakpoint<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/SearchInterface/SearchInterface.ts#L441">ui/SearchInterface/SearchInterface.ts
:441</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the search interface width that should be considered "medium" size, in pixels.</p>
</div>
<p>When the width of the window/device that displays the search page reaches or falls short of this threshold (but still exceeds the <a href="searchinterface.html#options.responsivesmallbreakpoint">responsiveSmallBreakpoint</a> value), the search page layout will change so that, for instance, facets within the element that has the coveo-facet-column class will be accessible from a dropdown menu on top of the result list rather than being fully rendered next to the result list.</p>
<p>This option is only taken into account when <a href="searchinterface.html#options.enableautomaticresponsivemode">enableAutomaticResponsiveMode</a> is set to true.</p>
<p>Default value is <code>800</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="searchinterface.html#options.enableautomaticresponsivemode"><code>enableAutomaticResponsiveMode</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-responsive-medium-breakpoint='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.responsivemode" class="tsd-anchor"></a>
<h3>responsive<wbr>Mode</h3>
<div class="tsd-signature tsd-kind-icon">responsive<wbr>Mode<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"auto"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"small"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"medium"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"large"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/SearchInterface/SearchInterface.ts#L468">ui/SearchInterface/SearchInterface.ts
:468</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the search interface responsive mode that should be used.</p>
</div>
<p>When the mode is auto, the width of the window/device that displays the search page is used to determine which layout the search page should use
(see <a href="searchinterface.html#options.enableautomaticresponsivemode">enableAutomaticResponsiveMode</a>, <a href="searchinterface.html#options.responsivemediumbreakpoint">responsiveMediumBreakpoint</a>
and [responsiveSmallBreakpoint<a href="searchinterface.html#options.responsivesmallbreakpoint">SearchInterface.options.responsiveSmallBreakpoint</a>])</p>
<p>When it's not on auto, the width is ignored and the the layout used depends on this option
(e.g. If set to "small", then the search interface layout will be the same as if it was on a narrow window/device)</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>auto</code></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.responsivesmallbreakpoint" class="tsd-anchor"></a>
<h3>responsive<wbr>Small<wbr>Breakpoint</h3>
<div class="tsd-signature tsd-kind-icon">responsive<wbr>Small<wbr>Breakpoint<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/SearchInterface/SearchInterface.ts#L454">ui/SearchInterface/SearchInterface.ts
:454</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the search interface width that should be considered "small" size, in pixels.</p>
</div>
<p>When the width of the window/device that displays the search page reaches or falls short of this threshold, the search page layout will change so that, for instance, some result list layouts which are not suited for being rendered on a small screen/area will be disabled.</p>
<p>This option is only taken into account when <a href="searchinterface.html#options.enableautomaticresponsivemode">enableAutomaticResponsiveMode</a> is set to true.</p>
<p>Default value is <code>480</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="searchinterface.html#options.enableautomaticresponsivemode"><code>enableAutomaticResponsiveMode</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-responsive-small-breakpoint='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.resultsperpage" class="tsd-anchor"></a>
<h3>results<wbr>Per<wbr>Page</h3>
<div class="tsd-signature tsd-kind-icon">results<wbr>Per<wbr>Page<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/SearchInterface/SearchInterface.ts#L201">ui/SearchInterface/SearchInterface.ts
:201</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the number of results to display on each page.</p>
</div>
<p>For more advanced features, see the <a href="resultsperpage.html">ResultsPerPage</a> component.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>When the <a href="resultsperpage.html">ResultsPerPage</a> component is present in the page, this option gets overridden and is useless.</p>
</blockquote>
<p>Default value is <code>10</code>. Minimum value is <code>0</code>.</p>
<dl class="tsd-comment-tags">
<dt>Minimum</dt>
<dd><p><code>0</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-results-per-page='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.searchpageuri" class="tsd-anchor"></a>
<h3>search<wbr>Page<wbr>Uri</h3>
<div class="tsd-signature tsd-kind-icon">search<wbr>Page<wbr>Uri<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/SearchInterface/SearchInterface.ts#L431">ui/SearchInterface/SearchInterface.ts
:431</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the search page you wish to navigate to when instantiating a standalone search box interface.</p>
</div>
<p>Default value is <code>undefined</code>, which means that the search interface does not redirect.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-search-page-uri='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.timezone" class="tsd-anchor"></a>
<h3>timezone</h3>
<div class="tsd-signature tsd-kind-icon">timezone<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/SearchInterface/SearchInterface.ts#L353">ui/SearchInterface/SearchInterface.ts
:353</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the timezone in which the search interface is loaded. This allows the index to recognize some special
query syntax.</p>
</div>
<p>This option must have a valid IANA zone info key (AKA the Olson time zone database) as its value.</p>
<p><strong>Example:</strong> <code>America/New_York</code>.</p>
<p>By default, the search interface allows a library to try to detect the timezone automatically.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-timezone='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.uselocalstorageforhistory" class="tsd-anchor"></a>
<h3>use<wbr>Local<wbr>Storage<wbr>For<wbr>History</h3>
<div class="tsd-signature tsd-kind-icon">use<wbr>Local<wbr>Storage<wbr>For<wbr>History<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/SearchInterface/SearchInterface.ts#L188">ui/SearchInterface/SearchInterface.ts
:188</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to save the interface state in the local storage of the browser.</p>
</div>
<p>You might want to set this option to <code>true</code> for reasons specifically important for your implementation.</p>
<p>Default value is <code>false</code>.</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-use-local-storage-for-history='true'
data-use-local-storage-for-history='false'</pre>
</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">
<a name="constructor" class="tsd-anchor"></a>
<h3>constructor</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">new <wbr>Search<wbr>Interface<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">ISearchInterfaceOptions</span>, analyticsOptions<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span>, _window<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Window</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="searchinterface.html" class="tsd-signature-type">SearchInterface</a></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/SearchInterface/SearchInterface.ts#L536">ui/SearchInterface/SearchInterface.ts
:536</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Creates a new SearchInterface. Initialize various singletons for the interface (e.g., usage analytics, query
controller, state model, etc.). Binds events related to the query.</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. This cannot be an <code>HTMLInputElement</code> for
technical reasons.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">ISearchInterfaceOptions</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The options for the SearchInterface.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> analyticsOptions: <span class="tsd-signature-type">any</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The options for the <a href="analytics.html">Analytics</a> component. Since the Analytics component is normally
global, it needs to be passed at initialization of the whole interface.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> _window: <span class="tsd-signature-type">Window</span><span class="tsd-signature-symbol"> = window</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The window object for the search interface. Used for unit tests, which can pass a mock. Default is
the global window object.</p>
</div>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="searchinterface.html" class="tsd-signature-type">SearchInterface</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel">
<h3>Implements</h3>
<ul class="tsd-hierarchy">
<li><a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></li>
</ul>
</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>