Add a "See All X Results" item to the autosuggest panel

elasticpress-autosuggest-view-all-results.js

let autosuggestTotal = 0;

const autosuggestDataFilter = (data) => {
	autosuggestTotal = data?.hits?.total || 0;
	return data;
}
wp.hooks.addFilter('ep.Autosuggest.data', 'myTheme/autosuggestDataFilter', autosuggestDataFilter);

const autosuggestListHTMLFilter = (listHTML, options, input) => {
	const allUrl = new URL(input.form.action);
	const formData = new FormData(input.form);
	const urlParams = new URLSearchParams(formData);

	allUrl.search = urlParams.toString();

	const url = allUrl.toString();

	listHTML += `<li class="autosuggest-item" role="option" aria-selected="false" id="autosuggest-option-all">
		<a href="${url}" class="autosuggest-link" data-url="${url}" tabindex="-1">
			View All ${autosuggestTotal} Results
		</a>
	</li>`;

	return listHTML;
};

wp.hooks.addFilter('ep.Autosuggest.listHTML', 'myTheme/autosuggestListHTMLFilter', autosuggestListHTMLFilter);