Algolia autocomplete template for MetaBox.io website

autocomplete.php

<script type="text/html" id="tmpl-autocomplete-header">
  <div class="autocomplete-header">
	<div class="autocomplete-header-title">{{{ data.label }}}</div>
	<div class="clear"></div>
  </div>
</script>

<script type="text/html" id="tmpl-autocomplete-post-suggestion">
  <a class="suggestion-link" href="{{ data.permalink }}" title="{{ data.post_title }}">
	<div class="suggestion-post-attributes">
		<span class="suggestion-post-title">{{{ data._highlightResult.post_title.value }}}</span>
	</div>
  </a>
</script>

<script type="text/html" id="tmpl-autocomplete-term-suggestion">
  <a class="suggestion-link" href="{{ data.permalink }}" title="{{ data.name }}">
	<svg viewBox="0 0 21 21" width="21" height="21">
	  <svg width="21" height="21" viewBox="0 0 21 21">
		<path
			d="M4.662 8.72l-1.23 1.23c-.682.682-.68 1.792.004 2.477l5.135 5.135c.7.693 1.8.688 2.48.005l1.23-1.23 5.35-5.346c.31-.31.54-.92.51-1.36l-.32-4.29c-.09-1.09-1.05-2.06-2.15-2.14l-4.3-.33c-.43-.03-1.05.2-1.36.51l-.79.8-2.27 2.28-2.28 2.27zm9.826-.98c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25 1.25.56 1.25 1.25 1.25z"
			fill-rule="evenodd"></path>
	  </svg>
	</svg>
	<span class="suggestion-post-title">{{{ data._highlightResult.name.value }}}</span>
  </a>
</script>

<script type="text/html" id="tmpl-autocomplete-user-suggestion">
  <a class="suggestion-link user-suggestion-link" href="{{ data.posts_url }}" title="{{ data.display_name }}">
	<# if ( data.avatar_url ) { #>
	  <img class="suggestion-user-thumbnail" src="{{ data.avatar_url }}" alt="{{ data.display_name }}">
	  <# } #>

		<span class="suggestion-post-title">{{{ data._highlightResult.display_name.value }}}</span>
  </a>
</script>

<script type="text/html" id="tmpl-autocomplete-footer"></script>

<script type="text/html" id="tmpl-autocomplete-empty">
  <div class="autocomplete-empty">
	  <?php esc_html_e( 'No results matched your query ', 'wp-search-with-algolia' ); ?>
	<span class="empty-query">"{{ data.query }}"</span>
  </div>
</script>

<script type="text/javascript">
  jQuery(function () {
	/* init Algolia client */
	var client = algoliasearch(algolia.application_id, algolia.search_api_key);

	/* setup default sources */
	var sources = [], sourceIndex = {}, index = 0;
	jQuery.each(algolia.autocomplete.sources, function (i, config) {
	  var suggestion_template = wp.template(config['tmpl_suggestion']);

	  sourceIndex[config['index_name']] = index++;

	  sources.push({
		source: algoliaAutocomplete.sources.hits(client.initIndex(config['index_name']), {
		  hitsPerPage: config['max_suggestions'],
		  attributesToSnippet: [
			'content:10'
		  ],
		  highlightPreTag: '__ais-highlight__',
		  highlightPostTag: '__/ais-highlight__'
		}),
		templates: {
		  header: function () {
			return wp.template('autocomplete-header')({
			  label: _.escape(config['label'])
			});
		  },
		  suggestion: function (hit) {
			if(hit.escaped === true) {
				return suggestion_template(hit);
			}
			hit.escaped = true;

			for (var key in hit._highlightResult) {
			  /* We do not deal with arrays. */
			  if (typeof hit._highlightResult[key].value !== 'string') {
				continue;
			  }
			  hit._highlightResult[key].value = _.escape(hit._highlightResult[key].value);
			  hit._highlightResult[key].value = hit._highlightResult[key].value.replace(/__ais-highlight__/g, '<em>').replace(/__\/ais-highlight__/g, '</em>');
			}

			for (var key in hit._snippetResult) {
			  /* We do not deal with arrays. */
			  if (typeof hit._snippetResult[key].value !== 'string') {
				continue;
			  }

			  hit._snippetResult[key].value = _.escape(hit._snippetResult[key].value);
			  hit._snippetResult[key].value = hit._snippetResult[key].value.replace(/__ais-highlight__/g, '<em>').replace(/__\/ais-highlight__/g, '</em>');
			}

			return suggestion_template(hit);
		  }
		}
	  });
	});

	function getSources( names = [] ) {
	  return names.map( name => sources[sourceIndex[name]] );
	}

	/* Setup dropdown menus */
	function initSearchField( selector, sourceNames ) {
		var config = {
			debug: algolia.debug,
			hint: false,
			openOnFocus: true,
			appendTo: 'body',
			templates: {
				empty: wp.template('autocomplete-empty')
			}
		};

		/* Instantiate autocomplete.js */
		var autocomplete = algoliaAutocomplete( document.querySelector( selector ), config, getSources( sourceNames ) )
			.on( 'autocomplete:selected', function ( e, suggestion ) {
				window.location.href = suggestion.permalink;
			} );

		/* Force the dropdown to be re-drawn on scroll to handle fixed containers. */
		jQuery( window ).scroll( function() {
			if ( autocomplete && autocomplete.autocomplete.getWrapper() && autocomplete.autocomplete.getWrapper().style.display === "block" ) {
				autocomplete.autocomplete.close();
				autocomplete.autocomplete.open();
			}
		} );
	}

	initSearchField( '.top-bar-navigation .search-field', ['wp_posts_product', 'wp_posts_post'] );
	initSearchField( '.widget_search .search-field', ['wp_posts_post'] );
	initSearchField( '.widget-area .bbp-search-form input[type="text"]', ['wp_posts_topic'] );
  });
</script>