Instant Search with Solr and AngularJS

Doug TurnbullAugust 25, 2013
vectors are fun

Previously, we gave an example of a super simple search results widget that utilized jsonp and AngularJS. Since then, we’ve polished our Angular skills quite a bit. Enough so, that I was able to throw together this instant search widget, in less than an hour. Angular truly is an amazing UI tool.

Below is the source for the widget (and here it is on github and jsfiddle). Like our previous example, we use Angular directives to create a custom HTML element. Unlike our previous example, we’ve allowed some interactivity with a simple input tag. Enjoy!

'use strict';

  .directive('searchResults', function () {
    return {
      scope: {
        solrUrl: '=',
        displayField: '=',
        query: '&',
        results: '&'
      restrict: 'E',
      controller: function($scope, $http) {
        console.log('Searching for ' + $scope.query + ' at ' + $scope.solrUrl);
        $scope.$watch('query', function() {
            {method: 'JSONP',
             url: $scope.solrUrl,
             params:{'json.wrf': 'JSON_CALLBACK',
                    'q': $scope.query,
                    'fl': $scope.displayField}
            .success(function(data) {
              var docs =;
              console.log('search success!');
              $ = docs;

            }).error(function() {
              console.log('Search failed!');
      template: '<input ng-model="query" name="Search"></input>' +
                '<h2>Search Results for </h2>' +
                '<span ng-repeat="doc in">' +
                '  <p></p>'  +

Notice how we added the $scope.$watch call in our controller. This directly binds some behavior to occur when a value in the $scope changes. Angular is well known for rerendering the page when $scope changes. What’s even more powerful is that Angular’s $watch lets you perform arbitrary behavior when a value in $scope changes. In our case, we’re reexecuting the search when the query member changes. The variable query is bound to the input tag, so nothing special is needed to invoke this code other than the user typing into the widget. Pretty snazzy!

Here’s how the widget is used:

    query="'car tax'"

We continue to enjoy working in Angular. Like any other framework, it requires a bit of reworking your mind into how it thinks, but once you get there, the productivity gains are pretty enormous. In many ways the tight binding of user behavior and display reminds me of my favorite desktop UI framework, QT that I used to blog about here. Very analogous to Angular’s philosophy of two-way bindings, QT uses signals/slots to tightly integrate input, display, and behavior. Once figured out, the tight binding of these things can be enormously productive in either the web or the desktop environment.

Of course, we’d love to hear about your search UI needs! Contact us! You too can take advantage of our expertise creating beautiful search and discovery interfaces (like say this one!)

More blog articles:

Let's do a project together!

We provide tailored search, discovery and analytics solutions using Solr and Elasticsearch. Learn more about our service offerings