algoliasearch
Version:
Algolia Search API Client
275 lines (252 loc) • 8.77 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="/dist/algoliasearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//rawgithub.com/lyonlai/bootstrap-paginator/master/build/bootstrap-paginator.min.js"></script>
<style type="text/css">
form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
display: block;
line-height: normal;
color: #333;
}
.search_box {
margin: 0px 0 0 0;
padding: 0 0 0 0;
position: relative;
height: 45px;
}
#q {
width: 413px;
display: block;
border: 1px solid #cfcfcf;
color: #000;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-appearance: none;
padding: 10px 13px 10px 13px;
line-height: 23px;
float: left;
font-size: 1em;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
margin: 0em;
border-radius: 4px 0px 0px 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
::-webkit-input-placeholder { color: #9f9f9f; }
:-moz-placeholder { color: #9f9f9f; }
::-moz-placeholder { color: #9f9f9f;}
:-ms-input-placeholder {color: #9f9f9f;}
.search_box #q:focus {
outline-width: 0px;
border: 1px solid #999;
}
.search_box #q:hover {
border: 1px solid #999;
}
.search_box_shadow {
-webkit-box-shadow: 0px 0px 2px 0px #2E61E4;
-moz-box-shadow: 0px 0px 2px 0px #2E61E4;
box-shadow: 0px 0px 2px 0px #2E61E4;
}
.search_box .searchbutton {
cursor: pointer;
display: inline-block;
padding: 0px;
width: 56px;
height: 43px;
margin: 0px 0 0 -1px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #FFFFFF;
border: 1px solid #2182CD;
text-align: center;
color: #5588AA;
}
[class^="icon-"], [class*=" icon-"] {
display:inline-block;
margin-top: 10px;
vertical-align: middle;
}
.search_box .searchbutton:hover {
background-color: white;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #9ad9ff));
background-image: -webkit-linear-gradient(top, white, #9ad9ff);
background-image: linear-gradient(to bottom,white, #9ad9ff);
box-shadow: inset 0 1px 0 #75C5E1
}
body {
background-color: #ffffff;
}
.panel {
width: 500px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
font-size: 1em;
background-color: #00B3FF;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.bg {
background-color: #f3f3f3;
}
#hits {
padding:5px 0px;
}
.hit {
cursor: pointer;
padding: 5px 15px;
}
.hit:hover {
background-color: #e9f0ff;
}
em {
font-style: normal;
font-weight: bold;
}
.grey {
display: inline;
color: #888;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
@media (max-width: 500px) {
body {
margin: 0px;
}
.panel {
margin-top: 0px;
width: 100%;
}
#q {
width: -moz-calc(100% - 60px);
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
}
}
</style>
</head>
<body>
<section class="panel">
<header class="panel-heading">
<div class="search_box">
<form action="#" method="get">
<input autocomplete="off" class="autocomplete" id="q" placeholder="Start typing" type="text" spellcheck="false" />
<div class='searchbutton'>
<i class="icon-search icon-large"></i>
</div>
</form>
</div>
</header>
</section>
<h1>Results</h1>
<div id="hits"></div>
<ul id="pagination" class="pagination"></ul>
<script type="text/javascript">
$(document).ready(function() {
var $inputfield = $("#q");
// 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');
// callback called on each query
function searchCallback(success, content) {
if (content.query != $("#q").val()) {
// do not take out-dated answers into account
return;
}
if (content.hits.length == 0) {
// no results
$('#hits').empty();
$('#pagination').empty();
return;
}
// Scan all hits and display them
var html = '';
for (var i = 0; i < content.hits.length; ++i) {
var hit = content.hits[i];
// For example, display all properties that have at least
// one highlighted word (matchLevel = full or partial)
html += '<div class="hit">';
for (var propertyName in hit._highlightResult) {
var el = hit._highlightResult[propertyName];
if (Object.prototype.toString.call(el) !== '[object Array]' && el.matchLevel !== 'none') {
html += '<div class="attribute"><span>' + propertyName.substr(0,1).toUpperCase() +
propertyName.substr(1) + ": </span>" + el.value + "</div>";
}
}
html += '</div>';
}
$('#hits').html(html);
// initialize the paginator
$('#pagination').bootstrapPaginator({
currentPage: (content.page + 1), // Algolia's pagination starts at 0
totalPages: content.nbPages,
bootstrapMajorVersion: 3,
onPageClicked: function(event, originalEvent, type, page) {
// if a page is clicked, go to next page performing an additional query
search(content.query, { page: (page - 1) }); // Algolia's pagination starts at 0
// and update the location to embed the page number
location.replace('#q=' + encodeURIComponent(content.query) + '&page=' + page);
}
});
}
// perform a search
function search(q, params) {
index.search(q, searchCallback, params);
}
// events binding
$inputfield.keyup(function() {
// on each keystroke, perform the query
search($inputfield.val());
}).focus().closest('form').on('submit', function() {
// on form submit, store the query string in the anchor
location.replace('#q=' + encodeURIComponent($inputfield.val()));
return false;
});
// check if there is a query+page in the anchor: http://example.org/#q=my+query&page=42
if (location.hash && location.hash.indexOf('#q=') === 0) {
var params = location.hash.substring(3);
var pageParamOffset = params.indexOf('&page=');
var q, page;
if (pageParamOffset > -1) {
q = decodeURIComponent(params.substring(0, pageParamOffset));
page = params.substring(pageParamOffset).split('=')[1];
} else {
q = decodeURIComponent(params);
page = 1;
}
// fill the form
$inputfield.val(q);
// perform the search
search(q, { page: (page - 1) });
}
});
</script>
</body>
</html>