Building a simple search in Statamic with Algolia

April 5th, 2018

Building a simple search in Statamic with Algolia

We are in love with the flat-file-cms Statamic for a while and use it as the backend for most of our current projects. Since you need to implement search functionality someday, we're sharing our technical setup on this with you step by step.

  1. Setting up Algolia
  2. Setting up the content indexing in Statamic
  3. Implementing the search on your frontend

Setting up Algolia

We choose Algolia as the search engine since Statamic has a direct integration to their API and provides a seamless and easy setup. Start by creating your Account at Algolia and go with the free plan.

In the Algolia backend, you have an overview of your indexes (we got none right now) with a lot of options like statistics, adding query rules, etc. Now head over to your API Keys Page and note your Application ID, Search-Only API Key and Admin API Key.

Setting up the content indexing in Statamic

Statamic takes care of the content indexing by nature. In the CP, head over to Settings > Search and choose Algolia as the driver. Put your Admin API Key and Application ID in the input fields and give your index a name (let's leave it at default).

Now add all searchable fields you like to be indexed but don't forget to add "url" so we have links to our search results.

Just hit save and every time you change your content (like adding a page or change texts) the new index will be committed to your Algolia application via the API. If you head over to your Algolia dashboard, you should see the statamic "default" index at the Indices page.

Implementing the search on your frontend

In the last step, we will use the Algolia Javascript API and the autocomplete plugin to generate a simple Search Input field.

First, add a HTML input tag with the ID of your choice and embed the two follwing js-scripts:

< input type="text" id="search-input" placeholder="Search..." />

< script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js">
< script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js">

In the next step, we'll init the Algolia API and the autocomplete plugin. Here you'll be asked to input your App-ID, Search-Only Key, Indexname and the ID of your input field.

In the autocomplete options, we are returning the "Title" wrapped in a a-tag with the matching url so that the user can click on the result and gets redirected to the result.


/* ALGOLIA SEARCH */
var client = algoliasearch('***APP-ID***', '***SEARCH ONLY KEY***');
var index = client.initIndex('default');
autocomplete('#search-input', {
hint: false,
autoselect: true,
}, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
templates: {
suggestion: function(suggestion) {
return ''+  suggestion._highlightResult.title.value + '' ;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = suggestion.url;
});

Now just add some basic CSS and we are ready to go!

.algolia-autocomplete {
width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
width: 100%;
}
.algolia-autocomplete .aa-hint {
color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
width: 100%;
background-color: #fff;
border: 1px solid #999;
border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
cursor: pointer;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
background-color: #B2D7FF;
}
.aa-suggestion{
position: relative;
width: 100%;
height: auto;
}
.aa-suggestion > a{
width: 100%;
display: block;
padding: 5px 10px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
font-weight: bold;
font-style: normal;
}
.algolia-autocomplete .aa-dropdown-menu > div > a{
width: 100%;
background-color: red;
}
This is how the search will look like

Collecting cross-device gyroscope data with lastdab.com

As we couldn’t find any online.

Collecting cross-device gyroscope data with lastdab.com

Live Cross-Browser Speech Recognition in Node with socket.io & Google

A Playground.

Live Cross-Browser Speech Recognition in Node with socket.io & Google