algoliasearch
Version:
Algolia Search API Client
66 lines (60 loc) • 3.11 kB
HTML
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="/dist/algoliasearch.min.js"></script>
<script src="/vendor/typeahead.jquery.js"></script>
<style type="text/css">
.demo { text-align: center; margin-top: 40px; }
.typeahead, .tt-query, .tt-hint { width: 500px; padding: 8px 12px; font-size: 24px; border: 2px solid #ccc; outline: none; margin: 0px; }
.typeahead { background-color: #fff; }
.typeahead:focus { border: 2px solid #0097cf; }
.tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
.tt-hint { color: #999 }
.tt-dropdown-menu { width: 100%; padding: 8px 0; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-top: 0px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.tt-suggestion { text-align: left; padding: 3px 20px; font-size: 18px; line-height: 24px; }
.tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; }
.tt-suggestion p { margin: 0; }
.tt-suggestion a { color: #000; text-decoration: none; }
.tt-suggestion em { font-weight: bold; font-style: normal; }
</style>
</head>
<body>
<div class="demo">
<h3>Basic</h3>
<input class="typeahead" type="text" placeholder="Start typing" id="typeahead-algolia" spellcheck="false"/>
</div>
<div class="demo">
<h3>Using Hogan templating engine</h3>
<input class="typeahead" type="text" placeholder="Start typing" id="typeahead-algolia-template" spellcheck="false"/>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Replace the following values by your ApplicationID and ApiKey.
var algolia = new AlgoliaSearch('YourApplicationID', 'YourAPIKey');
// replace YourIndexName by the name of the index you want to query.
var index = algolia.initIndex('YourIndexName');
// basic typeahead
$('#typeahead-algolia').typeahead(null, {
source: index.ttAdapter(),
displayKey: 'email'
});
// with a template and highlighting
var template = Hogan.compile('<picture><img src="{{{image_url}}}" /></picture>' +
'<div>{{{_highlightResult.email.value}}}</div>' +
'<div class="text-right"><small>{{{_highlightResult.name.value}}}</span></div>');
$('#typeahead-algolia-template').typeahead(null, {
source: index.ttAdapter({ hitsPerPage: 10 }),
displayKey: 'email',
templates: {
suggestion: function(hit) {
return template.render(hit);
}
}
});
});
</script>
</body>
</html>