algoliasearch
Version:
Algolia Search API Client
310 lines (291 loc) • 9.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" />
<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;
}
#inputfield {
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 #inputfield:focus {
outline-width: 0px;
border: 1px solid #999;
}
.search_box #inputfield: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;
}
.facets-wrapper {
float: left;
width: 20%;
}
.hits-wrapper {
width: 80%;
float: left;
}
#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;
}
li.refined, li.active {
font-weight: bold;
}
ul.list-inlined {
list-style-type: none;
}
ul.list-inlined li {
float: left;
display: block;
padding: 5px;
}
ul.list-inlined li.active {
background: #efefef;
}
@media (max-width: 500px) {
body {
margin: 0px;
}
.panel {
margin-top: 0px;
width: 100%;
}
#inputfield {
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 accept-charset="UTF-8" action="#" method="get">
<input autocomplete="off" class="autocomplete" id="inputfield" name="address" placeholder="Start typing" type="text" spellcheck="false"/>
<div class='searchbutton'>
<i class="icon-search icon-large"></i>
</div>
</form>
</div>
</header>
</section>
<div class="facets-wrapper">
<h1>Facets</h1>
<div id="facets"></div>
</div>
<div class="hits-wrapper">
<h1>Results</h1>
<div id="hits"></div>
<div id="pagination"></div>
</div>
<script type="text/javascript">
var inputfield = $("#inputfield");
var searchbutton = $("#searchbutton");
// Replace the following values by your ApplicationID and ApiKey.
var client = new AlgoliaSearch('YourApplicationID', 'YourApiKey');
// sample code with index 'hotels':
// - 10 hits per page
// - 'facilities' and 'meals' used as standard/conjunctive facets (refine using links)
// - 'stars' and 'price_ranges' used as disjunctive facets (refine using checkboxes)
var helper = new AlgoliaSearchHelper(client, 'hotels', {
facets: ['facilities', 'meals'],
disjunctiveFacets: ['stars', 'price_ranges'],
hitsPerPage: 10
});
function search() {
helper.search(inputfield.val(), searchCallback, { maxValuesPerFacet: 10 });
}
inputfield.keyup(function() {
search();
}).focus();
function searchCallback(success, content) {
// keep results and input synchronized
if (content.query != $("#inputfield").val()) {
return;
}
// empty results set
if (content.hits.length == 0 || content.query.trim() === '') {
$('#hits').empty();
$('#facets').empty();
$('#pagination').empty();
return;
}
// Scan all hits and display them
var hits = '';
for (var i = 0; i < content.hits.length; ++i) {
var hit = content.hits[i];
// For this hit, display all property that have a least one word highlighted (matchLevel = full or partial)
var properties = '';
for (var propertyName in hit._highlightResult) {
var el = hit._highlightResult[propertyName];
if (!(el instanceof Array) && el.matchLevel !== 'none') {
properties += "<div class='grey'>" + propertyName.substr(0,1).toUpperCase() +
propertyName.substr(1) + ": </div>" + el.value + "</br>";
}
}
if ((i % 2) == 0) {
hits += "<div class='hit'>" + properties + "</div>";
} else {
hits += "<div class='hit bg'>" + properties + "</div>";
}
}
$('#hits').html(hits);
var facets = '';
// Scan all facets and display them
for (var facet in content.facets) {
facets += '<h4>' + facet + '</h4>';
facets += '<ul>';
var values = content.facets[facet];
for (var value in values) {
var refined = helper.isRefined(facet, value);
facets += '<li class="' + (refined ? 'refined' : '') + '">' +
'<a href="javascript:helper.toggleRefine(\'' + facet + '\', \'' + value + '\')">' + value + '</a> (' + values[value] + ')' +
'</li>';
}
facets += '</ul>';
}
// Scan all disjunctive facets and display them
for (var facet in content.disjunctiveFacets) {
facets += '<h4>' + facet + '</h4>';
facets += '<ul>';
var values = content.disjunctiveFacets[facet];
for (var value in values) {
var refined = helper.isRefined(facet, value);
facets += '<li class="' + (refined ? 'refined' : '') + '">' +
'<input type="checkbox" onClick="javascript:helper.toggleRefine(\'' + facet + '\', \'' + value + '\')" ' + (refined ? 'checked="checked"' : '') + ' />' + value + ' (' + values[value] + ')' +
'</li>';
}
facets += '</ul>';
}
$('#facets').html(facets);
var pagination = '<ul class="list-inlined">';
if (content.page > 0) {
pagination += '<li><a href="javascript:helper.previousPage()">«</a></li>';
}
for (var i = 0; i < content.nbPages; ++i) {
pagination += '<li class="' + (i == content.page ? 'active' : '') + '">' + (i + 1) + '</li>';
}
if (content.page < content.nbPages - 1) {
pagination += '<li><a href="javascript:helper.nextPage()">»</a></li>';
}
pagination += '</ul>';
$('#pagination').html(pagination);
}
</script>
</body>
</html>