"backbone search"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: