Skip to content

Instantly share code, notes, and snippets.

@lorentzca

lorentzca/index.html

Created October 4, 2016 15:07
Show Gist options
  • Save lorentzca/6c28a8c43fd66646517fc9dd9166031f to your computer and use it in GitHub Desktop.
Save lorentzca/6c28a8c43fd66646517fc9dd9166031f to your computer and use it in GitHub Desktop.
Download ZIP
ghost blog insite search box by algolia
Raw
index.html
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.algolia-autocomplete {
width: 80%;
max-width: 710px;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
width: 100%;
min-height: 30px;
text-indent: 10px;
}
.aa-input {
border-radius: 20px;
background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
background-size:contain;
}
.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;
padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
font-weight: bold;
font-style: normal;
}
</style>
</head>
<body>
<div style="text-align: center;">
<input type="search" placeholder="Search posts" id="search-input" />
</div>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>
var client = algoliasearch('YOUR APP ID', 'YOUR READONLY API KEY')
var index = client.initIndex('YOUR INDEX NAME');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
templates: {
suggestion: function(suggestion) {
document_root = "https://YOUR DOMAIN/";
slug = suggestion._highlightResult.slug.value.replace(/<\/?em>/g, "");
url = document_root + slug;
return suggestion._highlightResult.title.value.link(url);
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment