Add related results to a JavaScript search page

This is for:

Developer

In this article

You can enrich your search interface with Related Results. A Coveo JavaScript Search page can show more than one list of results. While the main results list presents items from the main search interface scope, one or more other lists can present more specific or complementary results. All results lists are automatically generated following the query performed by the user.

You can create a related results list that presents Related community experts, and display the list on the side of the main search interface.

The following procedure describes how to create a related results list and include it in your Coveo JavaScript Search interface.

You need to declare a new object, CoveoRelatedResults, which will hold the logic for performing the correct queries to the index, and then display those results.
1. Declare what’s effectively the “constructor” of the object.
```
 var CoveoRelatedResults = function(element, root, options) {
     this.element = element;
     this.root = root;
     this.options = options;
     this.resultTemplate = _.template(this.options.resultTemplate);
     this.content = $('<div></div>').appendTo($(this.element));
     this.bindEvents();
 };
```
  The element parameter and property determine on which HTML element the related results will initialize and render themselves.
  
  The root parameter and property represent the root of the main search interface. Your CoveoRelatedResults needs this to listen to events from the main interface.
  
  The options parameter represents a JSON object with different options. It’s used to have a more “generic” object that you can modify with different options when you create a new CoveoRelatedResults.
  
  The resultTemplate property creates a new Underscore template. The string with which to create the function is passed from the options.
  
  You can change the tags that will enclose the generated list of results ('<div></div>') for example by '<ul class="myRelatedResults"></ul>' if you want to create a UL LI list with specific CSS.
2. You must then properly bind your CoveoRelatedResults to events.
```
 CoveoRelatedResults.prototype.bindEvents = function() {
     var _this = this;
     $(this.root).on(Coveo.QueryEvents.doneBuildingQuery, function(e, args) {
         var expression = args.queryBuilder.expression.build();
         _this.fetchNewResults(expression, args);
     });
 };
```
  You bind an event on doneBuildingQuery so that your function receives very specific arguments or args. One of them is the QueryBuilder object.
  
  By calling the build method on that object, you effectively build the whole query expression with which the main search interface will be querying the index, including anything that the user typed in the search box.
3. Use that expression to build your own expression and fetch the desired related results (in this case, related experts).
```
 CoveoRelatedResults.prototype.fetchNewResults = function(expression, args) {
     var _this = this;
     var advancedExpression = _this.options.hiddenExpression;
     var query = {
         q:expression,
         aq:advancedExpression,
         numberOfResults:_this.options.numberOfResults
     };
     Coveo.SearchEndpoint.endpoints["default"].search(query).done(function(data) {
         _this.content.empty();
         _.each(data.results, function(result, index) {
             _this.content.append(_this.resultTemplate({result:result}));
         });
     });
 };
```
  Here, we add an advancedExpression to the query object. This advanced expression comes from the option when we first created the CoveoRelatedResults.
  
  Then, by using the search method of the main endpoint. This method returns a JQuery Deferred object that’s resolved with query results. You can then iterate on results and pass them to your Underscore function to append to your main content element.

You’re now ready to use your object in the search page as shown in the following sample.

 <head>
        
     <script>
         $(function(){
         var myTemplate = "<a href='<%- result.clickUri %>'><%= result.title %></a>"; //This is a very simple template. Feel free to create more complicated stuff !
         var relatedDiv = $("#MyRelatedResults");
         var mainDiv = $("#MainSearchInterface");
         var options = {
             resultTemplate: myTemplate,
             hiddenExpression: "@myfield==myvalue" //This is also a very simple expression, for the demo's sake.
         }
         new CoveoRelatedResults(relatedDiv, mainDiv, options)
     })
     </script>
  
 </head>

 <body>
  
     <div id='MainSearchInterface' class='CoveoSearchInterface'>
         [...]
     </div>
  
     <div id='MyRelatedResults'></div>
 </body>

myTemplate can include more elements (see JavaScript Search Framework result templates). For example, if you used '<ul class="myRelatedResults"></ul>' in the code of step 1a, you can enclose the template in by '<li>...</ul>' to format the related results in a list.

hiddenExpression is the constant expression that determines the scope of your related results. For example, when you want the related results to only show items from your Extranet which is indexed by the source myExtranet, your hiddenExpression would be "@syssource==myExtranet".