\n * \n *
\n * ```\n */\nexport class OmniboxResultList extends ResultList implements IComponentBindings {\n static ID = 'OmniboxResultList';\n\n /**\n * Specifies a list a css class that should be ignored when the end user click result in the omnibox\n *\n * Any element that is specified here should normally be able to handle the standard click event.\n *\n * Any element that does not match this css class and that is clicked will trigger a redirection by the OmniboxResultList.\n */\n static elementsToIgnore = [\n 'coveo-field-table-toggle-caption',\n 'CoveoFollowItem',\n 'CoveoPrintableUri',\n 'CoveoQuickview',\n 'CoveoResultLink',\n 'CoveoResultRating',\n 'CoveoResultTagging',\n 'CoveoYouTubeThumbnail'\n ];\n\n static doExport = () => {\n exportGlobally({\n OmniboxResultList: OmniboxResultList\n });\n };\n\n /**\n * The options for the component\n * @componentOptions\n */\n static options: IOmniboxResultListOptions = {\n layout: ComponentOptions.buildStringOption({\n defaultValue: 'list',\n postProcessing: optionSetByUser => {\n if (optionSetByUser != 'list') {\n const logger = new Logger(OmniboxResultList);\n logger.warn(`Cannot apply layout ${optionSetByUser} on the OmniboxResultListComponent`);\n logger.warn(`OmniboxResultList does not support any layout other than \"list\"`);\n }\n return 'list';\n }\n }),\n /**\n * Specifies the z-index at which to render the ResultList inside the Omnibox.\n *\n * Default value is `51`. Minimum value is `16` ({@link Facet} components are at `50` by default)\n */\n omniboxZIndex: ComponentOptions.buildNumberOption({ defaultValue: 51, min: 16 }),\n\n /**\n * Specifies the title to use for this section.\n *\n * Default value is the localized string for `Suggested Results`.\n */\n headerTitle: ComponentOptions.buildStringOption(),\n\n /**\n * Specifies the override to use on the query sent to the OmniboxResultList component.\n *\n * Default value is `undefined`, which means no default override is specified.\n */\n queryOverride: ComponentOptions.buildQueryExpressionOption(),\n\n /**\n * Specifies the function to execute when the user selects a result suggestion.\n *\n * The default function opens the corresponding result URI in the browser.\n *\n * It is only possible to specify a value for this option in the {@link init} call of your search interface. You\n * cannot set it directly as an HTML attribute.\n *\n * **Example:**\n *\n * ```javascript\n * // You can call the init script using \"pure\" JavaScript:\n * Coveo.init(document.querySelector('#search'), {\n * OmniboxResultList : {\n * //Close the omnibox, change the selected HTMLElement background color and alert the result title.\n * onSelect : function(result, resultElement, omniBoxObject) {\n * omniBoxObject.close();\n * resultElement.css('background-color', 'red');\n * alert(result.title);\n * }\n * }\n * })\n *\n * // Or you can call the init script using the jQuery extension:\n * $(\"#search\").coveo(\"init\", {\n * OmniboxResultList : {\n * //Close the Omnibox, change the selected HTMLElement background color and alert the result title.\n * onSelect : function(result, resultElement, omniBoxObject) {\n * omniBoxObject.close();\n * resultElement.css('background-color', 'red');\n * alert(result.title);\n * }\n * }\n * })\n * ```\n */\n onSelect: ComponentOptions.buildCustomOption<\n (result: IQueryResult, resultElement: HTMLElement, omniboxObject: IPopulateOmniboxEventArgs) => void\n >(() => {\n return null;\n })\n };\n\n private lastOmniboxRequest: { omniboxObject: IPopulateOmniboxEventArgs; resolve: (...args: any[]) => void };\n\n /**\n * Creates a new OmniboxResultList component.\n * @param element The HTMLElement on which to instantiate the component.\n * @param options The options for the OmniboxResultList component.\n * @param bindings The bindings that the component requires to function normally. If not set, these will be\n * automatically resolved (with a slower execution time).\n */\n constructor(public element: HTMLElement, public options?: IOmniboxResultListOptions, public bindings?: IComponentBindings) {\n super(element, options, bindings, OmniboxResultList.ID);\n this.options = ComponentOptions.initComponentOptions(element, OmniboxResultList, options);\n this.setupOptions();\n this.bind.onRootElement(OmniboxEvents.populateOmnibox, (args: IPopulateOmniboxEventArgs) => this.handlePopulateOmnibox(args));\n this.bind.onRootElement(QueryEvents.buildingQuery, (args: IBuildingQueryEventArgs) => this.handleBuildingQuery(args));\n this.bind.onRootElement(InitializationEvents.afterComponentsInitialization, () => {\n this.handleAfterComponentInit();\n });\n }\n\n /**\n * Builds and returns an array of `HTMLElement` from the {@link IQueryResults} set received as an argument.\n * @param results The IQueryResults set to build an array of `HTMLElement` from.\n */\n public buildResults(results: IQueryResults): Promise\n
`;\n return template;\n }\n\n instantiateToElement(object?: IQueryResult): Promise\n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n * By default, the terms to highlight are the current query and the\n * associated stemming words from the index.\n * The only required parameter is the content, which specify the string that needs to be highlighted.\n * The other parameters will normally be automatically resolved for you from the current result object.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamText` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamText: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * This helper operates exactly like the {@link highlightStreamText} helper, except\n * that it should be used to highlight HTML content. The helper takes care\n * of not highlighting the HTML markup.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamHTML` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamHTML: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * Formats a numeric value using the format string.\n *\n * - `content`: The numeric value to format.\n * - `format` Optional. The string format to use. See the Globalize library for the list of available formats.\n *\n * When the helper is used in a [`FieldValue`]{@link FieldValue} component, this value is automatically retrieved from the specified [`field`]{@link FieldValue.options.field}.\n *\n * **Example:**\n *\n * ```html\n * \n * ```\n */\n number: (content: string, format: string | INumberFormatOptions) => string;\n /**\n * Formats a date value to a date-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n date: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a time-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n time: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using the specified\n * options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n dateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a currency value to a string using the specified options.\n *\n * - `content`: The number value to format.\n * - `options`: Optional. The options to use (see {@link ICurrencyToStringOptions}).\n */\n currency: (content: any, options?: ICurrencyToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using options suitable for\n * email dates\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n emailDateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Renders one or several email values in `mailto:` hyperlinks.\n *\n * - `value`: The string or array of strings that contains a list of semicolon-separated email\n * values. When multiple values are passed, each value is displayed in a\n * separate hyperlink.\n * - `companyDomain`: Optional. The string that contains your own domain (e.g.:\n * coveo.com). When specified, this parameter allows email addresses\n * coming from your own domain to be displayed in a shortened format\n * (e.g.: Full Name), whereas email addresses coming from an external\n * domain will be displayed in an extended format (e.g.: Full Name\n * (domain.com)). If this parameter is not specified, then the shortened\n * format will automatically be used.\n * - `me`: Optional. The string that contains the current username. If it is\n * specified, then the email address containing the current username will\n * be replaced by the localized string 'Me'.\n * - `lengthLimit`: Optional. The number of email addresses that you want to display\n * before an ellipse is added (e.g.: 'From Joe, John and 5 others').
\n * The default value is 2.\n * - `truncateName`: Optional. When the username is available from the email address,\n * then you can specify if you want to truncate the full name. (e.g.:\n * 'John S.' instead of 'John Smith').
\n * The default value is `false`.\n */\n email: (value: string | string[], companyDomain?: string, me?: string, lengthLimit?: number, truncateName?: boolean) => string;\n /**\n * Formats a clickable HTML link (``).\n *\n * - `href`: The link URI\n * - `options`: Optional. The options to use (see {@link IAnchorUtilsOptions})\n */\n anchor: (href: string, options?: IAnchorUtilsOptions) => string;\n /**\n * Formats an HTML image tag (`