Blog

Instant Search with Solr and AngularJS

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, weve allowed some interactivity with a simple input tag. Enjoy!

'use strict';angular.module('solrAngularDemoApp')  .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() {          $http(            {method: 'JSONP',             url: $scope.solrUrl,             params:{'json.wrf': 'JSON_CALLBACK',                    'q': $scope.query,                    'fl': $scope.displayField}            })            .success(function(data) {              var docs = data.response.docs;              console.log('search success!');              $scope.results.docs = docs;            }).error(function() {              console.log('Search failed!');            });        });      },      template: '' +                '

Search Results for

' + '' + '

' + '
' }; });

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. Whats even more powerful is that Angulars $watch lets you perform arbitrary behavior when a value in $scope changes. In our case, were 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:

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 Angulars 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!)