jQueryでsolrクライアントを書いてみる

facetとhighlightに対応(Solr 1.3前提)。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.facet {
  width: 200px;
  margin: 10px;
  float: left;
}
#category {
  background-color: #ccc;
  width: 200px;
  height: 480px;
}
.doc {
  background-color: #eee;
  width: 520px;
  margin: 10px;
  font-size: 12px;
  float: left;
}

em {
  font-weight: bold;
}
</style>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
<!--

var query = "";

function getUrl(q){
  var url = 
  "http://localhost:8080/solr/select?" +
  "indent=on" +
  "&version=2.2" +
  "&q=" + q +
  "&start=0" +
  "&rows=10" +
  "&fl=*%2Cscore" +
  "&qt=standard" +
  "&wt=json" +
  "&json.wrf=?" +
  "&explainOther=" +
  "&hl=true" +
  "&hl.fl=text" +
  "&hl.usePhraseHighlighter=true" +
  "&facet=true" +
  "&facet.field=category";
  return url;
}

function view(url){
  $.ajax({
    url : url,
    dataType : "jsonp",
    data : {},
    success : function(data){
      var facet = "<select id=\"category\" size=\"2\">\n";
      var category = data.facet_counts.facet_fields.category;
      for(i = 0; i < category.length / 2; i++){
        if(category[ i * 2 + 1] == 0) break;
        facet += "<option value=\""
              + category[i * 2] + "\">" 
              + category[i * 2]
              + "(" + category[i * 2 + 1] + ")</option>\n";
      }
      facet += "</select>";
      var doc = "numFound : " + data.response.numFound + "<br/>";
      var docs = data.response.docs;
      for(i = 0; i < docs.length; i++){
        doc += "<h3>" + docs[i].title + "</h3>\n";
        var id = docs[i].id;
        if(data.highlighting[id]['text']){
          var highlight = data.highlighting[id]['text'].join("<br/>\n");
          doc += highlight;
        } else {
          doc += "<p>" + docs[i].text + "</p>\n";
        }
      }
      $(".facet").empty().append(facet);
      $(".doc")
      .css("height","480px")
      .css("padding","4px")
      .css("overflow","scroll")
      .empty().append(doc);
      $("#category").change(function(){
        var c = $(this).attr("value");
        query = "category:" + c + " AND " + query;
        var url = getUrl(query);
        view(url);
      });
    },
    error : function(){alert("error")}
  });
}

$(document).ready(function(){
  $("#f").submit(function(){
    var q = $("#q").attr("value");
    query = "(title:" + q + "^2.0 OR text:" + q + ")";
    var url = getUrl(query);
    view(url);
    return false;
  });
});
//-->
</script>
</head>
<body>

<form id="f">
<input type="text" id="q" />
<input type="submit" value="Search" />
</form>

<div class="facet"></div>

<div class="doc"></div>

</body>
</html>

schema.xml（抜粋）

<types>
    <fieldtype name="text_ja" class="solr.TextField" >
      <analyzer class="org.apache.lucene.analysis.cjk.CJKAnalyzer" />
    </fieldtype>
</types>
<fields>
   <field name="id" type="sint" indexed="true" stored="true"/>
   <field name="title" type="text_ja" indexed="true" stored="true" />
   <field name="text" type="text_ja" indexed="true" stored="true" />
   <field name="category" type="string" indexed="true" stored="true" multiValued="true" />
</fields>