Skip to content

Instantly share code, notes, and snippets.

@kosho

kosho/site-search-jquery.html

Created July 10, 2018 07:46
Show Gist options
  • Save kosho/9a49dc07bdbf9e78b0b37949915ba80b to your computer and use it in GitHub Desktop.
Save kosho/9a49dc07bdbf9e78b0b37949915ba80b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
site-search-jquery.html
<!DOCTYPE html>
<html>
<style>
span.st-snippet em {
font-style: normal;
font-weight: bold;
background: yellow;
}
</style>
<head>
<script type='text/javascript' src="http://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript' src='swiftype-search-jquery/jquery.ba-hashchange.min.js'></script>
<script type="text/javascript" src="swiftype-search-jquery/jquery.swiftype.search.js"></script>
<link type="text/css" rel="stylesheet" href="swiftype-search-jquery/search.css" media="all" />
<script type='text/javascript'>
var resultTemplate = Hogan.compile('<div class="st-result"><h3 class="title"><a href="{{url}}" class="st-search-result-link">{{title}}</a></h3><div class="st-metadata"><span class="st-snippet">{{{body}}}</span></div></div>');
var customRenderer = function(documentType, item) {
var data = {
title: item['title'],
url: item['url'],
body: item.highlight['body']
};
return resultTemplate.render(data);
};
$(function() {
$('#st-search-input').swiftypeSearch({
resultContainingElement: '#st-results-container',
engineKey: '__ENGINE_KEY__',
renderFunction: customRenderer,
highlightFields: {'page': {'body': {'size': 300, 'fallback': true}}}
});
});
</script>
</head>
<body>
<form>
Search: <input type='text' id='st-search-input' class='st-search-input' />
</form>
<div id="st-results-container" class="st-result-listing"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment