<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Algolia/pen/AXVLmy?limit=all&page=24&q=partial" />
<style>
:root {
font-size: 16px;
}
* {
box-sizing: border-box;
font-family: Arial;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 1em;
}
body {
background: #efefef;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
input[type="checkbox"] {
display: inline-block;
float: left;
width: 24px;
height: 24px;
position: relative;
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(0, 0, 0, 0.2);
text-align: center;
margin: 8px 8px 0 0;
border-radius: 3px;
line-height: 42px;
cursor: pointer;
}
input[type="checkbox"]:checked:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 62 46' xmlns='http://www.w3.org/2000/svg'><title>Shape</title><path d='M60.467 1.54c-1.562-1.562-4.096-1.562-5.658 0L20.867 35.48 7.194 21.806c-1.562-1.562-4.095-1.562-5.657 0-1.562 1.562-1.562 4.095 0 5.657L18.04 43.966c.78.78 1.805 1.172 2.83 1.172 1.023 0 2.046-.39 2.828-1.172l36.77-36.77c1.56-1.562 1.56-4.094 0-5.656z' fill='%2314C145' fill-rule='evenodd'/></svg>") no-repeat center center/70%;
}
header {
padding: 0 1em;
max-width: 1200px;
margin: auto;
}
header a {
color: inherit;
text-decoration: none;
}
header span {
color: #42A5EE;
}
@media (max-height: 790px) and (max-width: 730px) {
header {
display: none;
}
}
.app {
padding: 1em;
max-width: 1200px;
margin: auto;
position: relative;
}
.app .search-box {
font-size: 18px;
padding: 1em 0.75em;
width: 100%;
appearance: none;
border: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
background: #fff url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><title>Shape</title><path d='M47.008 41.814L32.016 27.13c1.754-2.77 2.68-5.97 2.68-9.263 0-9.565-7.783-17.35-17.348-17.35C7.783.518 0 8.302 0 17.868c0 9.565 7.783 17.346 17.348 17.346 3.654 0 7.15-1.133 10.127-3.28l14.908 14.604c.62.61 1.44.945 2.313.945.896 0 1.736-.354 2.363-.994 1.273-1.302 1.25-3.398-.052-4.674zm-29.66-11.396c-6.92 0-12.55-5.63-12.55-12.55 0-6.92 5.63-12.55 12.55-12.55 6.92 0 12.55 5.63 12.55 12.55 0 3.258-1.243 6.346-3.5 8.695-2.39 2.486-5.605 3.855-9.05 3.855z' fill='%23A7A7A7' fill-rule='evenodd'/></svg>") no-repeat center right 24px/32px;
border-radius: 4px;
}
.app .categories,
.app .facet-list,
.app .results,
.app .pager {
float: left;
border-radius: 4px;
margin-right: 16px;
margin-left: 0;
margin-top: 1em;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
background: #fff;
}
.app .categories,
.app .facet-list {
max-width: 360px;
width: 100%;
padding: 1em 0.5em;
}
.app .categories li,
.app .facet-list li {
padding: 0 8px;
float: left;
display: inline-block;
height: 42px;
line-height: 42px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 0.25em;
}
.app .categories li:not(:last-child),
.app .facet-list li:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.app .categories li:hover,
.app .facet-list li:hover {
color: #14C145;
}
.app .categories li.active input:before,
.app .facet-list li.active input:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 62 46' xmlns='http://www.w3.org/2000/svg'><title>Shape</title><path d='M60.467 1.54c-1.562-1.562-4.096-1.562-5.658 0L20.867 35.48 7.194 21.806c-1.562-1.562-4.095-1.562-5.657 0-1.562 1.562-1.562 4.095 0 5.657L18.04 43.966c.78.78 1.805 1.172 2.83 1.172 1.023 0 2.046-.39 2.828-1.172l36.77-36.77c1.56-1.562 1.56-4.094 0-5.656z' fill='%2314C145' fill-rule='evenodd'/></svg>") no-repeat center center/70%;
}
.app .categories li .badge,
.app .facet-list li .badge {
background: #42A5EE;
color: #fff;
padding: 0.25em 0.5em;
border-radius: 14px;
font-size: 12px;
max-height: 22px;
text-align: right;
}
@media (max-width: 900px) {
.app .categories,
.app .facet-list {
width: 100%;
max-width: 100%;
}
}
.app .results {
position: relative;
margin-right: 0;
max-width: calc(100% - 360px - 16px);
width: 100%;
overflow: auto;
padding: 1em;
}
@media (max-width: 900px) {
.app .results {
max-width: 100%;
}
}
.app .results div {
padding: 0.75em 0.75em;
border-bottom: 1px solid #efefef;
padding-left: 2.5em;
position: relative;
}
.app .results div:before {
display: block;
float: left;
content: '';
width: 2.5em;
height: 1em;
position: absolute;
left: 0;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 37 61' xmlns='http://www.w3.org/2000/svg'><title>Shape</title><path d='M10.87 58.832l24.328-24.33c.027-.025.065-.033.09-.06 1.147-1.146 1.716-2.66 1.712-4.17.004-1.51-.564-3.023-1.71-4.17-.028-.027-.065-.034-.092-.06L10.868 1.713C8.585-.57 4.846-.57 2.562 1.714.278 4 .277 7.738 2.56 10.022l20.252 20.25L2.56 50.525c-2.285 2.285-2.285 6.024 0 8.308 2.285 2.285 6.024 2.285 8.31 0z' fill='%23A7A7A7' fill-rule='evenodd'/></svg>") no-repeat center center/contain;
}
.app .results em {
background: #FDBD57;
padding: 0.15em;
}
.app .pager {
width: 100%;
margin-right: 0;
padding: 1em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
.app .pager button,
.app .pager span {
flex: 33%;
}
.app .pager button {
background: #42A5EE;
color: #fff;
appearance: none;
-webkit-appearance: none;
border: 0;
padding: 0.5em 0.25em;
cursor: pointer;
border-radius: 4px;
font-size: 18px;
}
.app .pager button:hover {
background: #388cca;
}
.app .pager span {
line-height: 32px;
font-weight: bold;
}
</style>
<style class="cp-pen-styles">/* We use a single CSS file for all our framework samples,
see here : https://codepen.io/Algolia/pen/kXZApQ */</style></head><body>
<header>
<h1><a href="https://community.algolia.com/algoliasearch-helper-js/">Algolia Search Helper with <span>Backbone</span>.</a></h1>
</header>
<div class='app'>
<input class='search-box' placeholder="Search..">
<ul class='categories'></ul>
<div class='results'>
</div>
<div class='pager'>
<button class='previous'>Previous</button>
<span class='current-page'></span>
<button class='next'>Next</button>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js'></script><script src='https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2'></script>
<script >// First let's define the usual configuration variables for our index
var applicationID = 'latency';
var apiKey = '249078a3d4337a8231f1665ec5a44966';
var index = 'bestbuy';
// Instanciation of the Algolia libraries
var client = algoliasearch(applicationID, apiKey);
var helper = algoliasearchHelper(client, index, {
disjunctiveFacets: ['category'],
hitsPerPage: 7,
maxValuesPerFacet: 3
});
// Backbone models
var Result = Backbone.Model.extend({});
var Refinement = Backbone.Model.extend({});
var Pager = Backbone.Model.extend({});
//Backbone collections
var Results = Backbone.Collection.extend({
model: Result
});
var RefinementList = Backbone.Collection.extend({
model: Refinement
})
// Backbone views
var RefinementListView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection, 'reset', this.render);
this.$el.on('click', 'input', function(e){
e.preventDefault();
var value = $(this).data('val');
helper.toggleRefinement('category', value).search();
})
},
render: function(){
var content = this.collection.map(function(f){
var value = f.get('name');
var count = f.get('count');
return "<li>" +
"<label>" +
"<input type='checkbox' " + (f.get('isRefined') ? 'checked' : '') + " data-val='"+ value + "' />" + value + " <span class='badge'>" + count + "</span>"
"</label>"+
"</li>" ;
});
this.$el.html(content);
}
});
var ResultsView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection, 'reset', this.render);
},
render: function(){
var resultsContent = this.collection.map(function(result){
return "<div>" + result.get('_highlightResult').name.value + "</div>";
});
this.$el.html(resultsContent);
}
});
var PagerView = Backbone.View.extend({
initialize: function(){
var currentPage = this.currentPage = this.$('.current-page');
this.listenTo(this.model, 'change', this.render);
this.$('.previous').on('click', _.partial(this.clickPrevious, this.model));
this.$('.next').on('click', this.clickNext);
currentPage.html(this.model.get('current') + 1);
},
render: function() {
this.currentPage.html(this.model.get('current') + 1);
},
clickNext: function() {
helper.nextPage().search();
},
clickPrevious: function(model) {
if(model.get('current') === 0) return;
helper.previousPage().search();
}
});
// For this example we'll have a single view
var AppView = Backbone.View.extend({
el: $('.app'),
initialize: function(){
var input = this.input = this.$('.search-box');
var resultList = new Results();
var categories = new RefinementList();
var pager = new Pager({
current: helper.getPage()
});
// Now it's time to bind the helper so that we can fill the collection
helper.on('result', function(results) {
resultList.reset(results.hits);
categories.reset(results.getFacetValues('category', ['selected', 'count:desc']))
});
helper.on('change', function(state) {
pager.set('current', this.getPage());
});
this.resultList = new ResultsView({
el: this.$('.results'),
collection: resultList
})
this.categoriesList = new RefinementListView({
el: this.$('.categories'),
collection: categories
});
this.pager = new PagerView({
el: this.$('.pager'),
model: pager
});
this.input.on('keyup', function(){
helper.setQuery(input.val()).search();
});
helper.search()
}
});
new AppView();
//# sourceURL=pen.js
</script>
</body></html>
