Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Semantic UI & Algolia search
Implementing Semantic UI and Algolia search can be a pain in the but if you're not use to deal with Semantic UI API stuff. This feels a little bit hackish but so far it works well enough; bonus for not needing the Algolia javascript client.
var algolia = {
id: "Algolia app ID",
key: "Public key",
index: "Index name"
cache: false,
apiSettings: {
method: 'post',
url: 'https://' + + '' + algolia.index + '/query',
beforeXHR: function(xhr) {
// adjust XHR with additional headers
xhr.setRequestHeader ('X-Algolia-API-Key', algolia.key);
xhr.setRequestHeader ('X-Algolia-Application-Id',;
return xhr;
beforeSend: function(settings) {
// Retrieve the actual query and urlencode it. There's definitely a better way to do this... = JSON.stringify({ "params" : "query=" + encodeURIComponent(settings.urlData.query) + "&hitsPerPage=5" });
return settings;
onResponse: function(algoliaResponse) {
response = {
results : []
// translate Algolia API response to work with search.
$.each(algoliaResponse.hits, function(index, item) {
// Of course you'll have to adapt this to your needs.
title : item.title,
url : "/myroute/" +
return response;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.