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.

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>

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