Solrstrap is a Query-Result interface for Solr- it is intended to be a starting point for those building web interfaces that talk to Solr, or a very lightweight admin tool for querying Solr in a Googleish fashion.

Cool things about Solrstrap:

• Requires only local installation- easy to set up
• Access to all Bootstrap functionality. Can be easily extended in a Bootstrappy way.
• Blazing fast
• Uses less bandwidth

Use it as you see fit. Merciless criticism and fawning praise equally welcome.

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

Handlebars.js has become the defacto standard for templating in JavaScript, filling the void left from the abandonment and non-replacement of the jQuery template project. Handlebars.js is an implementation of the mighty platform-independant mustache project

JavaScript templating makes it a lot easier to implement cool interface functionality on your search result page such as responsive design, autoscrolling and more. Handlebars make JS templating a cinch.

You get the benefit of Handlebars.js on webpages that have a lot of repeating code such as lists, search-results and libraries.

In order to see Solr and Handlebars.js in action click here or copy and paste the code below into an empty .html file.

<b>Handlebars.js and Solr Demo</b><br>
Type in something reutersey and click the <b>search</b> button!<br>
<input id="searchterm" />
<button id="search">search</button>
<div id="rs"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script id="hit-template" type="text/x-handlebars-template">
  <div class="entry">
    <b>{{title}}</b><br>
    {{text}}
  </div>
</script>
<script type='text/javascript'>
  var hitTemplate = Handlebars.compile($("#hit-template").html());
  $("#search").click(function(){
    $("#rs").empty();
    $.getJSON("http://evolvingweb.ca/solr/reuters/select/?q=" + $("#searchterm").val() + "&wt=json&json.wrf=?&indent=true", function(result){
      for (var i = 0; i < result.response.docs.length; i++) {
        $("#rs").append(hitTemplate({title: result.response.docs[i].title, text: result.response.docs[i].text}));
      }
    });
  });
</script>

One of the live demos has also been uploaded here to demonstrate how a Solr server can be rendered using JavaScript.

Here is a quick demo that demonstrates how to create an “instant search” service using JSON, ajax and JQuery. This instant search application uses the excellent OpenSearch interface provided by Wikipedia. Use this code as a starting point for developing prettier result pages.

The Wikipedia query API is described in some detail here.

Click here to see the demo, or copy and paste the code below into a blank HTML document.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Search Wikipedia!

<input id="searchterm" type="text" /> <button id="search">search</button>

<script type="text/javascript">// <![CDATA[
      $("#searchterm").keyup(function(e){
        var q = $("#searchterm").val();
        $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
        {
          srsearch: q,
          action: "query",
          list: "search",
          format: "json"
        },
        function(data) {
          $("#results").empty();
          $("#results").append("

Results for <b>" + q + "</b>

");
          $.each(data.query.search, function(i,item){
            $("#results").append("
<div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a>" + item.snippet + "</div>
");
          });
        });
      });

// ]]></script>

This image search app provides a neat solution to the history/speed issue by simply displaying results in a push-pop stack. As you type in new search terms, the image thumbnails are prepended to the resultset. Your search history stays on the page, but is simply pushed further down as new thumbnails appear. Its is really fast and simple to browse your image search history.

Also, this search app operates entirely in 30 lines of HTML and JavaScript by using a JSON feed to the flickr API. Simple and elegant.

Click here for the demo

Or copy and paste the code below this line:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Comperio Super Simple Image Search</title>
  </head>
  <body>
    Search for <b>cats, dogs, cakes</b>, or anything else that takes your fancy :-)
    <br />
    <input id="searchterm" />
    <button id="search">search</button>
    <div id="results"></div>
    <script>
      $("#search").click(function(){
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
          tags: $("#searchterm").val(),
          tagmode: "any",
          format: "json"
        },
        function(data) {
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).prependTo("#results");
            if ( i == 10 ) return false;
          });
        });
      });
    </script>
  </body>
</html>

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

({
  "responseHeader":{
    "status":0,
    "QTime":1,
    "params":{
      "json.wrf":"?",
      "indent":"true",
      "q":"ford",
      "wt":"json"}},
  "response":{"numFound":3,"start":0,"docs":[
      {
        "id":"147",
        "name":"Ford Capri",
        "description":"pink 1978 model- great condition",
        "owner":"576463865",
        "store":"59.7440738,10.204456400000026",
        "tags":[
          "Ford, Capri, Pink, 1978"]},
      {
        "id":"148",
        "name":"Ford Orion",
        "description":"Blue, Good runner",
        "owner":"576463865",
        "store":"59.9138688,10.752245399999993",
        "tags":[
          "blue, orion, 1.6"]},
      {
        "id":"149",
        "name":"Ford Anglia",
        "description":"As seen in Harry Potter, Can be flown",
        "owner":"576463865",
        "store":"57.2366283,-2.2650615999999673",
        "tags":[
          "Harry Potter, Anglia, Flying car"]}
    ]
  }
})

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:

<div id="rs"></div>
  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script>
  <script type='text/javascript'>
    $.getJSON("http://localhost:8080/solr/select/?q=ford&wt=json&json.wrf=?&indent=true", function(result){
    var Parent = document.getElementById('rs');
    for (var i = 0; i < result.response.docs.length; i++) {
      var thisResult = "<b>" + result.response.docs[i].name + "</b><br>" + result.response.docs[i].description
      + ", " + result.response.docs[i].tags + "<br>";
      var NewDiv = document.createElement("DIV");
      NewDiv.innerHTML = thisResult;
      Parent.appendChild(NewDiv);
    }
  });
</script>

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

A comment from a colleague on my previous blog post, “XSLT creation revisited for SharePoint 2010 Search and a small search tip”, asked how I would do blended search results in SharePoint Search. I have come up with three ways of doing this, where I will demonstrate the quick and dirty one in this post, and save the “best architectural” version for last. So watch out for part 2 and 3 of this topic in the weeks to come.

The method described in this post is suitable for non-developers.

For those who don’t know what “blended search results” is, it is search results from a different source merged into your regular results. On Bing and Google you often see news in addition to images and videos blended with the regular web hits. The method is used to keep apples from oranges, (or fruit cakes from gingerbread men in these x-mas times), so the end-user can more easily digest the search result.

In the image below, Bing has inserted image hits between hit #3 and #4 of the web results.

For this example the main content will be crawled content from http://www.comperiosearch.com and the blended content will be web content from Bing.

On your search center page drop in a new Core Results Web Part into the right hand column and name it for example “News Results”. SharePoint already have a Search Location for “Internet Search Results” defined so we will use this. This is an Open Search definition and you can also create and upload your own towards other Open Search providers. You find this under “Federated Locations” on your Search Query SSA in Central Admin. We will limit the results to 3 items.

The next step is to modify the XSL of the web part. Uncheck “Use Location Visualization” and click the “XSL Editor…”

Locate <xsl:template name=”MainTemplate” > inside the xsl and append the following xsl after the line <div class=”srch-results” >

<span class="kwrd">&lt;</span><span class="html">xsl:text</span> <span class="attr">disable-output-escaping</span><span class="kwrd">="yes"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;!</span>[CDATA[
<span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">src</span><span class="kwrd">="http://code.jquery.com/jquery-1.4.4.min.js"</span> <span class="attr">type</span><span class="kwrd">="text/javascript"</span><span class="kwrd">&gt;&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
&lt;script type=<span class="str">"text/javascript"</span>&gt;
    $( <span class="kwrd">function</span>()
    {
        <span class="kwrd">var</span> news = $(<span class="str">".srch-federationarea .srch-results .ms-searchsummarybody"</span>);
        news.css( <span class="str">"margin-left"</span>, <span class="str">"20px"</span>);
        news.css( <span class="str">"background-color"</span>, <span class="str">"#ccc"</span>);
        $(<span class="str">".srch-maintop2 .srch-results div:first"</span>).next().next().after( news );
    } );
<span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
]]<span class="kwrd">&gt;&lt;/</span><span class="html">xsl:text</span><span class="kwrd">&gt;</span>

This will link in jQuery from a CDN repository, and once the page is loaded the news search in the right column is moved with jQuery from the right column to after the third hit in the standard core results web part. The content is indented by 20 pixels, and the background is set to gray like seen on the image below.

(If you have fewer than three main results you need to modify the code for it to work)

In order for this to look better I would either need to do more jQuery magic, or change the xsl of the news results so that it renders it properly.

With an extra web part and a few lines added to an xslt, we have achieved blended results.