How to configure Solr Auto Suggest Feature on Broadleaf Commerce

This post shows the steps to configure Auto Suggest Feature on the Solr Search in Broadleaf Commerce Framework. If your Solr Configuration is embedded in the broadleaf framework instead of being an Stand Alone server. I would suggest to make it as an Stand Alone, Please refer the below tutorial from broadleaf for the same http://www.broadleafcommerce.com/docs/core/current/broadleaf-concepts/catalog-and-search/deployment-models/stand-alone Step 1 The Solr configuration comes with configuration files schema.xml and solrconfig.xml. We will add a new field in the schema.xml configuration and will also make changes for the fieldType as follows

//Define a new field

//This field will get populated by the product name field which is searchable by the solr by default, you can define your custom field on which you want auto suggest to work.


//Define the fieldType

            
                
                
            

Step 2: Under the solrconfig.xml we will define a new requestHandler that will fetch the suggestions for us and a searchComponent corresponding to that.

        
            
            suggest_phrase
            org.apache.solr.spelling.suggest.Suggester
            org.apache.solr.spelling.suggest.fst.FSTLookupFactory
            suggest_phrase
            0.
            true
            
        

    
        
            true
            suggest_phrase
            true
            10
            explicit
            10
            text
            false
            5
            2
            5
            true
            true
            5
            3
        
        
            suggest_phrase
        
    

Step 3:Under the SearchController we will add a new RequestMapping for /suggest and corresponding method

    @RequestMapping(value = "/suggest", produces = "application/json")
    public @ResponseBody List<Map<String, String>> suggest(Model model, HttpServletRequest request, HttpServletResponse response,
                  @RequestParam(value = "q") String q) throws ServletException, IOException, ServiceException, SolrServerException {
        List<Map<String, String>> results = new ArrayList<Map<String, String>>();
        SolrQuery params = new SolrQuery()
            .setRequestHandler("/suggest_phrase");
            params.set("spellcheck", true);
            params.set("spellcheck.q", q);
        QueryResponse queryResponse = SolrContext.getServer().query(params);
        SpellCheckResponse spellCheckResponse = queryResponse.getSpellCheckResponse();
        for(SpellCheckResponse.Suggestion suggestion : spellCheckResponse.getSuggestions()){
            for(String suggestionItem : suggestion.getAlternatives()){
                Map<String, String> suggestionMap = new HashMap<String, String>();
                suggestionMap.put("productName", suggestionItem);
                results.add(suggestionMap);
            }
        }

        return results;
    }

Step 4 : Add twitter typehead library and corresponding code for the suggestion to work on the search text box

	var Engine =new Bloodhound({
		        datumTokenizer: function(d) { 
		        	return Bloodhound.tokenizers.whitespace(d.value);
		        },
		        queryTokenizer: Bloodhound.tokenizers.whitespace,
		        remote:{
		        	url: 'search/suggest?q=%QUERY',
		        	wildcard: '%QUERY'
		        },
		        limit: 8
		    });
		    Engine.initialize();
		    $('#searchInput').typeahead({
		            minLength: 2,
		            highlight: true
		        },
		        {
		            source: Engine.ttAdapter(),
		            displayKey: "productName"
		        });

Note: There is one bug in Typehead version 0.11.1 in which the suggestions results from ajax are not synced with the search drop down. Its fixed in the git files, but yet to be merged. Fix it manually. https://github.com/twitter/typeahead.js/pull/1212/files