Auto Complete

Requirement : While searching we need to provide auto complete (suggest).

Solr version : 4.3.1

Solr comes with a default search application called browse. ( http://<server>:<port>/solr/browse  e.g. http://localhost:8983/solr/browse)

Solr installation directory has a example folder. Now please navigate to <solr installation directory>/example/solr/collection1/conf/velocity/ . This directory contains all the velocity template files and jquery.autocomplete.css and jquery.autocomplete.js

Now open head.vm following code is responsible for auto complete  functionality.

 <script>
    $(document).ready(function(){
      $("\#q").autocomplete('#{url_for_solr}/terms', {  ## backslash escaped #q as that is a macro defined in VM_global_library.vm
           extraParams:{
             'terms.prefix': function() { return $("\#q").val();},
             'terms.sort': 'count',
             'terms.fl': 'name',
             'wt': 'velocity',
             'v.template': 'suggest'
           }
         }
      ).keydown(function(e){
        if (e.keyCode === 13){
          $("#query-form").trigger('submit');
        }
      });

      // http://localhost:8983/solr/terms?terms.fl=name&terms.prefix=i&terms.sort=count
    });

    </script>

This part we have to customize for our need. Most of the time I copied this example folder rename it then start modifying schemal.xml  solrconfig.xml  and other files.

My schema fields are like below.
 <field name="id" type="string" indexed="true" stored="true" required="true" multiValued="false" />
   <field name="category" type="text_general" indexed="true" stored="true" omitNorms="true"/>
   <field name="countryName" type="text_general" indexed="true" stored="true"/>
  
   <field name="countryCode" type="text_general" indexed="true" stored="true"/>
   <field name="values" type="text_general" indexed="true" stored="true" multiValued="true"/>
   <field name="store" type="location" indexed="true" stored="true"/>

First change I made in head.vm
<script>
    $(document).ready(function(){
      $("\#q").autocomplete('#{url_for_solr}/terms', {  ## backslash escaped #q as that is a macro defined in VM_global_library.vm
           extraParams:{
             'terms.prefix': function() { return $("\#q").val();},
             'terms.sort': 'count',
             'terms.fl': 'countryName',
             'wt': 'velocity',
             'v.template': 'suggest'
           }
         }
      ).keydown(function(e){
        if (e.keyCode === 13){
          $("#query-form").trigger('submit');
        }
      });

      // http://localhost:8983/solr/terms?terms.fl=name&terms.prefix=i&terms.sort=count
    });
head.vm (location : your_application_name/solr/collection1/conf/velocity/head.vm)  only change is 'name' -> 'countryName'.

Next change in suggest.vm (location: your_application_name/solr/collection1/conf/velocity/suggest.vm) change the content like below

#foreach($t in $response.response.terms.countryName)
$t.key
#end

Another important file is richtext-doc.vm edit the field names to include your desired fields.

 Auto complete with display from more than one field

Earlier we displayed country name in the drop down. Now I need another field also (e.g. category).

Two changes I made to do this.

Change in head.vm

$("\#q").autocomplete('#{url_for_solr}/terms?terms.fl=category'

 

Earlier it was only $("\#q").autocomplete('#{url_for_solr}/terms

Change in suggest.vm

#foreach($t in $response.response.terms.category)
$t.key
#end

#foreach($t in $response.response.terms.countryName)
$t.key
#end

First I am listing category then the countryName.

Please see the image below, earlier category 'inflation' was not displayed. But this time 'inflation' also displayed along with the country name.