simplicitySearchResults

Displaying the best hits.

This widget is responsible for displaying the results of a search on the page.

You can either use server side rendering and provide HTML in the response of the search controller or JavaScript templating to generate the results in the browser.

The most common approach is to use server side rendering, this makes it the responsibility of the server side search controller to generate the HTML used to display search results. The generated HTML is returned as a JSON string value inside the regular JSON response from the search controller. The widget then just needs to splice it into the page.

HTML

<div id="searchResults"></div>

JavaScript

$('#searchResults').simplicitySearchResults();

Example

 

Choose a response from 1 and see the actual response detail at 2. The simplicitySearchResults widget renders the resultsHtml in 3.

You can take advantage of the browser to control the rendering of search results by converting the JSON response from the search controller to HTML with JavaScript. In this scenario the search controller does not have to return a resultsHtml field.

HTML

<div id="searchResults"></div>

JavaScript

$('#searchResults').simplicitySearchResults({
    resultsCallback: function (target, searchResponse) {
        // Example to that puts the name of each result item in a div
        $.each(searchResponse._discovery.response.properties, function (idx, props) {
          $('<div/>')
            .attr('title', props._id)
            .text(props.name)
            .appendTo(target);
        });
    }
});

Example

{
    "_discovery": {
        "response": {
            "properties": [
                {"_id":1, "name":"first"},
                {"_id":2, "name":"second"},
                {"_id":3, "name":"third"}
            ]
        }
    }
}
function (target, searchResponse) {
    target.children().remove();
    $.each(searchResponse._discovery.response.properties, function (idx, props) {
      $('<div/>')
        .attr('title', props._id)
        .text(props.name)
        .appendTo(target);
    });
}
function (target, searchResponse) {
    var list = $('<ol/>');
    $.each(searchResponse._discovery.response.properties, function (idx, props) {
      $('<li/>')
        .text(props.name)
        .appendTo(list);
    });
    target.html(list);
}
function (target, searchResponse) {
    target.children().remove();
    $.each(searchResponse._discovery.response.properties, function (idx, props) {
      $("<span class='label'/>")
        .text(props.name)
        .appendTo(target);
    });
}

The search response used for this example is displayed in 1. You can select a resultsCallback function from 2, see it's definition in 3 and it is applied to the simplicitySearchResults widget on 4.