Source: components/instant-search/instant-search-item/instant-search-result-item-collection.js

import jQ from "jquery";

import Utils from "../../../helpers/utils";
import Globals from "../../../helpers/globals";
import Class from "../../../helpers/class";
import InstantSearchResultItem from "./instant-search-result-item";

/**
 * Instant search result item - Collection item
 * @extends InstantSearchResultItem
 */
class InstantSearchResultItemCollection extends InstantSearchResultItem {
	/**
	 * @constructs
	 */
	constructor() {
		super();
		this.data = '';
	}

	/**
	 * Get the raw template of Instant search result item - Collection item
	 * @returns {String} The raw HTML string
	 */
  getTemplate() {
		return `
			<li class="{{class.searchSuggestionItem}} {{class.searchUiAutocompleteItem}}" aria-label="{{escapedBlockType}}: {{escapedDataTitle}}">
				<a href="{{searchLink}}">{{highlightedSuggestionResult}}</a>
			</li>
		`;
	}

	/**
	 * Replace the brackets in raw html template with proper values
	 * @returns {String} HTML string
	 */
  compileTemplate() {
		if (!this.isShow) {
			return '';
		}
		this.searchTerm = Utils.escape(Globals.currentTerm);
		var searchLink = Utils.reBuildUrlBaseOnLocale('/collections/' + this.data.handle);
		var highlightedSuggestionResult = this._highlightSuggestionResult(this.data.title, this.searchTerm);
		return this.getTemplate()
			.replace(/{{escapedBlockType}}/g, Utils.escape(this.parent.type))
			.replace(/{{escapedDataTitle}}/g, Utils.escape(this.data.title))
			.replace(/{{escapedDataId}}/g, Utils.escape(this.data.id))
			.replace(/{{class.searchSuggestionItem}}/g, Class.searchSuggestionItem)
			.replace(/{{class.searchUiAutocompleteItem}}/g, Class.searchUiAutocompleteItem)
			.replace(/{{searchLink}}/g, searchLink)
			.replace(/{{highlightedSuggestionResult}}/g, highlightedSuggestionResult);
	}

	/**
	 * Render the Instant search result item - Collection item
	 * @returns {Object} jQuery object
	 */
	render() {
		if (this.data) {
			this.$element = jQ(this.compileTemplate());
			// Set item data for ui-autocomplete-item
			var value = Utils.escape(this.data.title);
			var label = Utils.escape(this.parent.type) + ': ' + value;
			this.$element.data('ui-autocomplete-item', {
				label: label,
				value: value
			});
		} else {
			this.$element = null;
		}
		
	}
	
	/**
	 * Set data for Instant search result item - Collection item
	 * @param {Object} data Instant search result item data
	 */
	setData(data) {
		this.data = data;
		this.isShow = !!this.data;
	};
}

export default InstantSearchResultItemCollection;