Source: components/instant-search/instant-search-item/instant-search-result-item-popular.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 - Popular item
 * @extends InstantSearchResultItem
 */
class InstantSearchResultItemPopular extends InstantSearchResultItem {
	/**
	 * @constructs
	 */
	constructor() {
		super();
		this.data = '';
	}

	/**
	 * Get the raw template of Instant search result item - Popular item
	 * @returns {String} The raw HTML string
	 */
	getTemplate() {
		return `
			<li class="{{class.searchSuggestionItem}} {{class.searchUiAutocompleteItem}}" aria-label="{{escapedBlockType}}: {{escapedData}}">
				<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 '';
		}
		var searchTerm = Utils.escape(Globals.currentTerm);
		var searchLink = Utils.reBuildUrlBaseOnLocale('/search?' + Globals.searchTermKey + '=' + Utils.encodeURIParamValue(this.data));
		var highlightedSuggestionResult = this._highlightSuggestionResult(this.data, searchTerm);
		return this.getTemplate()
			.replace(/{{escapedBlockType}}/g, Utils.escape(this.parent.type))
			.replace(/{{escapedData}}/g, Utils.escape(this.data))
			.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 - Popular item
	 * @returns {Object} jQuery object
	 */
	render() {
		if (this.data) {
			this.$element = jQ(this.compileTemplate());
			// Set item data for ui-autocomplete-item
			var title = Utils.escape(this.data);
			var type = Utils.escape(this.parent.type);
			this.$element.data('ui-autocomplete-item', {
				label: type + ': ' + title,
				value: title
			});
		} else {
			this.$element = null;
		}
	}

	/**
	 * Set data for Instant search result item - Popular item
	 * @param {Object} data Instant search result item data
	 */
	setData(data) {
		this.data = data;
		this.isShow = !!this.data;
	};
}

export default InstantSearchResultItemPopular;