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

Solr handles free-text searches with a q parameter. Create a new widget, TextWidget.js, inheriting from AbstractTextWidget, which is designed to handle the q parameter:

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

And add the JavaScript file:

<script 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'
}));

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.set(value)) {
        self.doRequest();
      }
    }
  });
},

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 events behave differently. Instead, we use the AbstractTextWidget set API method directly. set returns true if the query was changed (if the query is set to the same value as before, it returns false). 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.