search:message-list

Table of Contents

Description
Usage
- Directive info
Example
- Source
- Result

Description

Output Messages and QuerySuggestions such as spellchecking or synonyms.

Custom messages within a message-list must be wrapped in another html tag! - see Example Custom

Usage

as element:

<search:message-list
       response="{string}"
       [type="{string}"]
       [title="{string}"]
       [first="{number}"]
       [last="{number}"]>
</search:message-list>

Directive info

This directive creates new scope.

Parameters

Param	Type	Details
response	string	The name of the response containing the messages to display.
type (optional)	string	The type of Message to display. Default is to include all messages irrespective of type.
title (optional)	string	Add a title to appear with this element.
first (optional)	number	First message to output from this result set (1 based).
last (optional)	number	Last message to output from this result set.

Param

Type

Details

response

string

The name of the response containing the messages to display.

type

(optional)

string

The type of Message to display. Default is to include all messages irrespective of type.

title

(optional)

string

Add a title to appear with this element.

first

(optional)

number

First message to output from this result set (1 based).

last

(optional)

number

Last message to output from this result set.

Example

Source

<h3 id="example_all-messages">All messages</h3>
<tk-example>
    <search:message-list response="response" title="My Messages"></search:message-list>
</tk-example>
<tk-code-wrapper>
    <code hljs language="html">
        <search:message-list response="response" title="My Fuzzy Results"></search:message-list>
    </code>
</tk-code-wrapper>

<hr />

<h3 id="example_only-messages-of-selected-type">Only messages of selected type</h3>
<tk-example>
    <search:message-list response="response" type="fuzzy-results" title="My Fuzzy Results"></search:message-list>
</tk-example>
<tk-code-wrapper>
    <code hljs language="html">
        <search:message-list response="response" type="fuzzy-results" title="My Fuzzy Results"></search:message-list>
    </code>
</tk-code-wrapper>

<hr />

<h3 id="example_first-and-last-messages">First and Last Messages</h3>
<tk-example>
    <search:message-list response="response" first="1" last="2" title="My Messages"></search:message-list>
</tk-example>
<tk-code-wrapper>
    <code hljs language="html">
        <search:message-list response="response" first="1" last="2" title="My Messages"></search:message-list>
    </code>
</tk-code-wrapper>

<hr />

<h3 id="example_custom">Custom</h3>
<tk-example>
    <search:message-list response="response" title="My Fuzzy Results">
        <p><strong>{{message.type}}</strong> - <span ng-bind-html="message.value"></span> <small>({{message.count}})</small></p>
    </search:message-list>
</tk-example>
<tk-code-wrapper>
    <code hljs language="html">
        <search:message-list response="response" title="My Fuzzy Results">
            <p>
                <strong>{{message.type}}</strong> - <span ng-bind-html="message.value"></span> <small>({{message.count}})</small>
            </p>
        </search:message-list>
    </code>
</tk-code-wrapper>

angular.module('lightning')
.controller('ExampleController', ['$scope','ResponseService', function($scope,ResponseService) {
        $scope.response = {
            "query": {
              "filters": [],
            },
            "hits": {
              "act": [
                "Long",
                0
              ]
            },
            "page": 2,
            "results": [],
            "facets": {},
            "facts": {},
            "time": 19,
            "messages": [
              {
                "type": "fuzzy-results",
                "value": "<em>Lorem</em> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                "count": 20
              },
              {
                "type": "not-fuzzy-results",
                "value": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                "count": 100
              },
              {
                "type": "fuzzy-results",
                "value": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                "count": 0
              }
            ]
          }
          ResponseService.setResponse('response',$scope.response);
      }]);