Skip to content

Instantly share code, notes, and snippets.

@rilwis
Created Jul 30, 2020
Embed
What would you like to do?
Algolia autocomplete template for MetaBox.io website
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment