Auto Suggestions at PLP Page

[former_member641076]

Please let me know how to enable auto suggestions at PLP page. Let us say if I search with characters in the search box at PLP I need to list of suggested products with that characters. Let me know how to implement this. Thanks in advance.

[aimprosoft · Accepted solution]

Hi Yeshwanth Kumar Thotam Setty,

to implement autosuggestion from the scratch you have to:

• in the solr.impex file, create/update SolrIndexedProperty for product type by changing the attribute useForAutocomplete to true and perform the solr indexation

$solrIndexedType = productType

INSERT_UPDATE SolrIndexedProperty; solrIndexedType(identifier)[unique = true]; name[unique = true]; useForAutocomplete[default = false]
                                 ; $solrIndexedType                          ; code               ; true
                                 ; $solrIndexedType                          ; name               ; true

• in the SearchPageController you have to create method which will call the solrProductSearchFacade for getting suggestions. Depending on your needs it's can be just suggestions (strings) or "full product objects". Please check sample code below:

@ResponseBody
@RequestMapping(value = "/autocomplete", method = RequestMethod.GET)
public List<String> getAutocompleteSuggestions(@RequestParam("term") final String term)
{
   final String termSanitized = SecurityUtil.sanitize(term);
   final List<String> terms = new ArrayList<String>();
   for (final AutocompleteSuggestionData termData : solrProductSearchFacade.getAutocompleteSuggestions(termSanitized))
   {
      terms.add(termData.getTerm());
   }
   return terms;
}

@ResponseBody
@RequestMapping(value = "/autocomplete/" + COMPONENT_UID_PATH_VARIABLE_PATTERN, method = RequestMethod.GET)
public AutocompleteResultData getAutocompleteSuggestions(@PathVariable final String componentUid,
      @RequestParam("term") final String term) throws CMSItemNotFoundException
{
   final String termSanitized = SecurityUtil.sanitize(term);
   final AutocompleteResultData resultData = new AutocompleteResultData();

   resultData.setSuggestions(subList(solrProductSearchFacade.getAutocompleteSuggestions(termSanitized), MAX_PRODUCTS_ELEMENTS));
   resultData.setProducts(subList(solrProductSearchFacade.textSearch(termSanitized).getResults(), MAX_PRODUCTS_ELEMENTS));
   return resultData;
}

• in the JS file you have to implement event handling, which should be mapped to search input. During the writing new value into the search input - ajax function should call your method with sending the term you wrote, and then handle response and update UI.

Hope this helps,

Igor

[former_member641076 · Accepted solution]

Thanks a lot Igor.

My Issue resolved.