Recline JS Search Demo

NOVEMBER 1, 2012

Recline JS

We’ve recently finished a demo for ReclineJS showing how it can be used to build JS-based (ajax-style) search interfaces in minutes (or even seconds!): http://reclinejs.com/demos/search/

Because of Recline’s pluggable backends you get out of the box support for data sources such as SOLR, Google Spreadsheet, ElasticSearch, or plain old JSON or CSV – see examples below for live examples of using different backends.

Interested in using this yourself? The (prettified) source JS for the demo is available (plus the raw version) and it shows how simple it is to build an app like this using Recline – plus it has tips on how to customize and extend).

demo

More Examples

In addition to the simple example with local data there are several other examples showing how one can use this with other data sources including Google Docs and SOLR:

  1. A search example using a google docs listing Shell Oil spills in the Niger delta

  2. A search example running of OpenSpending SOLR API – we suggest searching for something interesting like “Drugs” or “Nuclear power”!

Code

The full (prettified) source JS for the demo is available (plus the raw version) but here’s a key code sample to give a flavour:

// ## Simple Search View
//
// This is a simple bespoke Backbone view for the Search. It Pulls together
// various Recline UI components and the central Dataset and Query (state)
// object
//
// It also provides simple support for customization e.g. of template for list of results
// 
//      var view = new SearchView({
//        el: $('some-element'),
//        model: dataset
//        // EITHER a mustache template (passed a JSON version of recline.Model.Record
//        // OR a function which receives a record in JSON form and returns html
//        template: mustache-template-or-function
//      });
var SearchView = Backbone.View.extend({
  initialize: function(options) {
    this.el = $(this.el);
    _.bindAll(this, 'render');
    this.recordTemplate = options.template;
    // Every time we do a search the recline.Dataset.records Backbone
    // collection will get reset. We want to re-render each time!
    this.model.records.bind('reset', this.render);
    this.templateResults = options.template;
  },

// overall template for this view template: ' </span> <div class="controls"> </span> <div class="query-here"></div> </span> </div> </span> <div class="total"><h2><span></span> records found</h2></div> </span> <div class="body"> </span> <div class="sidebar"></div> </span> <div class="results"> </span> } </span> </div> </span> </div> </span> <div class="pager-here"></div> </span> ',

// render the view render: function() { var results = ''; if (_.isFunction(this.templateResults)) { var results = _.map(this.model.records.toJSON(), this.templateResults).join('\n'); } else { // templateResults is just for one result … var tmpl = '' + this.templateResults + ''; var results = Mustache.render(tmpl, { records: this.model.records.toJSON() }); } var html = Mustache.render(this.template, { results: results }); this.el.html(html);

<span class="c1">// Set the total records found info</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.total span&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">recordCount</span><span class="p">);</span>

<span class="c1">// ### Now setup all the extra mini-widgets</span>
<span class="c1">// </span>
<span class="c1">// Facets, Pager, QueryEditor etc</span>

<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">FacetViewer</span><span class="p">({</span>
  <span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span>
<span class="p">});</span>
<span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.sidebar&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">pager</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">Pager</span><span class="p">({</span>
  <span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.pager-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">pager</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">QueryEditor</span><span class="p">({</span>
  <span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.query-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>

} });