Reuters tutorial: step 5

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Support the back button

We’ve been through the steps for creating a new widget twice now, so without further ado:

Create a new widget CurrentSearchWidget.js:

(function ($) {
AjaxSolr.CurrentSearchWidget = AjaxSolr.AbstractWidget.extend({
});
})(jQuery);

Add the JavaScript file:

<script type="text/javascript" src="widgets/CurrentSearchWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CurrentSearchWidget({
  id: 'currentsearch',
  target: '#selection',
}));

Now, let’s implement afterRequest to display the current query:

afterRequest: function () {
  var self = this;
  var links = [];

  var q = this.manager.store.get('q').val();
  if (q != '*:*') {
    links.push($('<a href="#"/>').text('(x) ' + q).click(function () {
      self.manager.store.get('q').val('*:*');
      self.manager.doRequest(0);
      return false;
    }));
  }
  if (links.length) {
    AjaxSolr.theme('list_items', this.target, links);
  }
  else {
    $(this.target).html('<div>Viewing all documents!</div>');
  }
},

The Solr instance storing the Reuters data uses SearchHandler as its default request handler, in which the q parameter is mandatory. If we do not wish to set a query, we must set the q parameter to *:*, which means “match all documents.”

The above afterRequest method checks if a query is set. If so, it create a link displaying the current query which, when clicked, unsets the query (by setting the q parameter to *:* using the ParameterStore get and the Parameter val API methods) and sends a request to Solr. Then, if any links were created, it displays the links. If no links were created, it displays the text “Viewing all documents!”

Now, let’s display the current filters. Add the following snippet before if (links.length) { ...:

var fq = this.manager.store.values('fq');
for (var i = 0, l = fq.length; i < l; i++) {
  links.push($('<a href="#"/>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));
}

And add the following method to the widget:

removeFacet: function (facet) {
  var self = this;
  return function () {
    if (self.manager.store.removeByValue('fq', facet)) {
      self.manager.doRequest(0);
    }
    return false;
  };
}

These additions collect all the fq parameter values using the ParameterStore values API method. For each parameter value, it creates a link displaying the parameter value which, when clicked, removes the parameter value (using the ParameterStore removeByValue API method) and sends a request to Solr. The removeFacet method is necessary to work around JavaScript closures.

Lastly, let’s add a link to unset the current query and remove all current filters. Add the following snippet before if (links.length) { ...:

if (links.length > 1) {
  links.unshift($('<a href="#"/>').text('remove all').click(function () {
    self.manager.store.get('q').val('*:*');
    self.manager.store.remove('fq');
    self.manager.doRequest(0);
    return false;
  }));
}

If more than one link was created, it creates a link displaying the words “remove all,” which, when clicked, unsets the query (as we’ve seen earlier), removes all fq parameters (using the ParameterStore remove API method), and sends a request to Solr.

[What we have so far]

Now that we have filters, let’s add a free-text widget to finish the basics.