Asynchronous search results with JQuery, Solr, Json and Ajax

Solr is the popular, blazing fast open source enterprise search platform from the Apache Lucene project

Update: Aug 5th 2012 A live demo of asynchronous search results with JQuery, Solr, Json and Ajax can now be found here

There are many reasons to load search results asynchronously- most of the big searchy dotcoms are going in this direction with Google, Facebook and Twitter all relying heavily on ajax to render their feed-based pages.

Considering how mainstream it has become, information on the nuts and bolts of the technique remain thin on the ground. So here is a really quick overview of what you need to get started.

For the purposes of this post I will assume that you have an working installation of Solr in a more or less standard configuration. Getting Solr up and running is no mean feat in itself, but mercifully there are a number of fairly decent guides squirreled away on the internet. You could of course use any search motor that returns search results in a Json format, in fact even if they dont, Comperio Front can now be used to provide a JSON query service on any (collection of) search motor(s).

So lets assume that a query for “Ford” returns Json in the following format from our very small index of cars. Note that the Solr URL for this feed would look something like this: http://localhost:8080/solr/select/?q=ford&wt=json&json.wrf=?&indent=true where wt specifies json and json.wrf specifies the callback

We can now parse this feed by using the .getJSON function in the excellent jQuery library. The javascript and associated HTML would be more or less like so:

And thats it :-) You will notice that when the HTML above is loaded in a browser, that the search results are returned independently of the webpage.

Next Steps: Use JavaScript templating to render results from Solr

Solr is the popular, blazing fast open source enterprise search platform from the Apache Lucene project

Article written by

Fergus McDowall
Senior Consultant at Comperio. Dedicated emacs user.

2 response to: «Asynchronous search results with JQuery, Solr, Json and Ajax»

  1. March 31, 2011 at 22:11 | Permalink

    None more AJAXy than Google these days, with their Instant Search, although Yahoo! Search Direct is a good number 2.

    http://www.youtube.com/watch?v=NvoNFP-v7v8

    The SERP with a page load (perceived as a noticable flicker) may be an essential part of the users expectation, and AJAX may actually violate that expectation if done without care. At least some form of visual feedback, usually a spinner, must be provided to help the user direct his/her attention to the update.

    I’d love to see your example done with the Templates plugin for jQuery. That should clean up your code nicely :-)

    http://api.jquery.com/category/plugins/templates/

  2. April 1, 2011 at 10:10 | Permalink

    I must admit that I had to google SERP ;-)

    The example above would give you a page analogous to facebook’s “news feed” (home page)- so the frame loads fairly instantaneously and the results populate it afterwards.



Leave a response





XHTML: These tags are allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Page not found - Sweet Captcha
Error 404

It look like the page you're looking for doesn't exist, sorry

Search stories by typing keyword and hit enter to begin searching.


OSLO

Comperio AS
Øvre Slottsgate 27
NO-0157 Oslo,
Norway
+47 22 33 71 00
View map

STOCKHOLM

Search Provider Sverige AB
Gamla Brogatan 34
SE-11 120 Stockholm
Sweden
+46 8-21 49 00
View map