Reuters tutorial: step 6

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: Extra credit

The Solr instance in this tutorial stores much of the data we would usually search for using the q parameter in the field allText. So, instead of writing a widget inheriting from AbstractTextWidget to handle the q parameter, we will writer another widget inheriting from AbstractFacetWidget.

Create a new widget, TextWidget.js, inheriting from AbstractFacetWidget:

(function ($) {
AjaxSolr.TextWidget = AjaxSolr.AbstractFacetWidget.extend({
});
})(jQuery);

And add the JavaScript file:

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

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

Manager.addWidget(new AjaxSolr.TextWidget({
  id: 'text',
  target: '#search',
  field: 'allText'
}));

Let’s implement the abstract methods init and afterRequest, which should be familiar now:

init: function () {
  var self = this;
  $(this.target).find('input').bind('keydown', function(e) {
    if (e.which == 13) {
      var value = $(this).val();
      if (value && self.add(value)) {
        self.manager.doRequest(0);
      }
    }
  });
},

afterRequest: function () {
  $(this.target).find('input').val('');
}

Unlike the tagcloud widget, we cannot use the handy clickHandler API method in the jQuery bind function, because the bind and click handlers behave differently. Instead, we use the AbstractFacetWidget add API method directly. add returns true if the filter query was successfully added (a filter query will not be added if it has already been added). Here, if it returns true, the widget sends a request the Solr.

[What we have so far]

And there we have it, a free-text widget. Now, let’s add autocompletion.