Using Liferay Autocomplete Utility to Customize a Searchbar

gistfile1.txt

<#assign
	searchInputId = namespace + stringUtil.randomId()
/>

<@liferay_aui.fieldset cssClass="search-bar">
	<@liferay_aui.input
		cssClass="search-bar-empty-search-input"
		name="emptySearchEnabled"
		type="hidden"
		value=searchBarPortletDisplayContext.isEmptySearchEnabled()
	/>

	<div class="input-group ${searchBarPortletDisplayContext.isLetTheUserChooseTheSearchScope()?then("search-bar-scope","search-bar-simple")}">
		<#if searchBarPortletDisplayContext.isLetTheUserChooseTheSearchScope()>
			<div class="input-group-item input-group-item-shrink input-group-prepend">
				<@clay["button"]
					aria\-label="${languageUtil.get(locale, 'search')}"
					displayType="secondary"
					icon="search"
					type="submit"
				/>
			</div>

			<@liferay_aui.select
				cssClass="search-bar-scope-select"
				label=""
				name=htmlUtil.escape(searchBarPortletDisplayContext.getScopeParameterName())
				title="scope"
				useNamespace=false
				wrapperCssClass="input-group-item input-group-item-shrink input-group-prepend search-bar-search-select-wrapper"
			>
				<@liferay_aui.option
					label="this-site"
					selected=searchBarPortletDisplayContext.isSelectedCurrentSiteSearchScope()
					value=searchBarPortletDisplayContext.getCurrentSiteSearchScopeParameterString()
				/>

				<#if searchBarPortletDisplayContext.isAvailableEverythingSearchScope()>
					<@liferay_aui.option
						label="everything"
						selected=searchBarPortletDisplayContext.isSelectedEverythingSearchScope()
						value=searchBarPortletDisplayContext.getEverythingSearchScopeParameterString()
					/>
				</#if>
			</@>

			<#assign data = {
				"test-id": "searchInput"
			} />

			<@liferay_aui.input
				autoFocus=true
				autocomplete="off"
				cssClass="search-bar-keywords-input"
				data=data
				id="${searchInputId}"
				label=""
				name=htmlUtil.escape(searchBarPortletDisplayContext.getKeywordsParameterName())
				placeholder=searchBarPortletDisplayContext.getInputPlaceholder()
				title=languageUtil.get(locale, "search")
				type="text"
				useNamespace=false
				value=htmlUtil.escape(searchBarPortletDisplayContext.getKeywords())
				wrapperCssClass="input-group-item input-group-append search-bar-keywords-input-wrapper"
			/>
		<#else>
			<div class="input-group-item search-bar-keywords-input-wrapper">
				<input
					autocomplete="off"
					class="form-control input-group-inset input-group-inset-after search-bar-keywords-input"
					data-qa-id="searchInput"
					id="${searchInputId}"
					name="${htmlUtil.escape(searchBarPortletDisplayContext.getKeywordsParameterName())}"
					placeholder="${searchBarPortletDisplayContext.getInputPlaceholder()}"
					title="${languageUtil.get(locale, "search")}"
					type="text"
					value="${htmlUtil.escape(searchBarPortletDisplayContext.getKeywords())}"
				/>

				<div class="input-group-inset-item input-group-inset-item-after">
					<@clay["button"]
						aria\-label="${languageUtil.get(locale, 'search')}"
						displayType="unstyled"
						icon="search"
						type="submit"
					/>
				</div>

				<@liferay_aui.input
					name=htmlUtil.escape(searchBarPortletDisplayContext.getScopeParameterName())
					type="hidden"
					value=searchBarPortletDisplayContext.getScopeParameterValue()
				/>
			</div>
		</#if>
	</div>
</@>

<#if searchBarPortletDisplayContext.isSuggestionsEnabled()>
	<script>
		Liferay.on('liferaySearchAutocompleteReady', () => {
			Liferay.Search.Autocomplete('${searchInputId}', {
				containerClass: 'search-bar-autocomplete',
				destinationFriendlyURL:
					'${searchBarPortletDisplayContext.getDestinationFriendlyURL()}',
				scopeIfDefined:
					'${searchBarPortletDisplayContext.getScopeIfDefined()}',
				showEmptyResultsMenu: true,
				suggestionsContributorConfiguration:
					'${searchBarPortletDisplayContext.getSuggestionsContributorConfiguration()}',
				suggestionsURL:
					'${searchBarPortletDisplayContext.getSuggestionsURL()}',
				templates: {
					renderMenu: (resource, {onShowMore, renderHeader, renderItem, renderShowMore}) => {
						const renderLabelItem = (hit) => {
							return (
								`<a href="` +
									hit.attributes.assetURL +
								`">
									<span class="label label-secondary">
										<span class="label-item label-item-expand text-truncate">` +
											hit.text +
										`</span>
									</span>
								</a>`
							)
						}
						return (
							`<div class="row c-mb-3">
								<div class="col-8">` +
									renderHeader(resource.items[0]) +
									resource.items[0].suggestions
										?.map((hit) => renderItem(hit))
										.join('') +
								`</div>
								<div class="col-4">` +
									`<li class="dropdown-subheader">
										Quick Reference
									</li>
									<div class="c-ml-3 c-mr-3">` +
										resource.items[0].suggestions
											?.map((hit) => renderLabelItem(hit))
											.join('') +
										renderShowMore(onShowMore) +
									`</div>
								</div>
							</div>`
						);
					},
					renderShowMore: (onShowMore) => {
						return (
							`<button class="btn btn-secondary c-mt-3 c-pt-1 text-center" onClick="` +
								onShowMore +
							`">
								<span class="text-2">
									Not finding what you need? Click Here!
								</span>
							</button>`
						);
					},
				},
			});
		});
	</script>
</#if>

Result Screenshot: