2.28.0
Search Results display content returned in response to a user’s search and are constructed from Data Tables, Headers, and List Groups.
Name
|
Required
|
Description
|
---|---|---|
Results List |
Yes |
Displays the items that are returned by a search. They can be displayed in either Stacked or Tabular formats depending on kind of information that needs to be shown. |
Container |
No |
Allows the search results to be layered on top of page content. |
Header |
No |
Groups related items to provide hierarchy within search results. |
Text Match |
No |
Provides a highlight to show which content matches the specified search term. |
Use to display groups of search results which have different sets of metadata associated with them, e.g., search results including articles (with author name and publish data metadata) and investments (with ticker and exchange metadata).
<mds-search-results>
<mds-header size="level 8" additional-class="mds-search-results__header">
Securities
<mds-link additional-class="mds-search-results__link" href="#" slot="mds-header-actions" size="small"> See All Results </mds-link>
</mds-header>
<mds-list-group variation="navigation" content='[
{
"text": "Apple Inc",
"metadataBelow": [
"AAPL",
"NASDAQ"
],
"href": "#"
},
{
"text": "Appleseed Institutional",
"metadataBelow": [
"APPIX",
"NASDAQ"
],
"href": "#"
},
{
"text": "Appleseed Investor",
"metadataBelow": [
"APPLX",
"NASDAQ"
],
"href": "#"
}]'>
</mds-list-group>
<mds-header size="level 8" additional-class="mds-search-results__header">
Morningstar Research
<mds-link additional-class="mds-search-results__link" href="#" slot="mds-header-actions" size="small"> See All Results </mds-link>
</mds-header>
<mds-list-group variation="navigation" content='[
{
"text": "Apple Shares Look Attractice",
"metadataBelow": [
"01-03-2019",
"Abhinav Davuluri"
],
"href": "#"
},
{
"text": "Apple Under Review",
"metadataBelow": [
"12-20-2018",
"Abhinav Davuluri"
],
"href": "#"
},
{
"text": "Credit Rating Initiation: Apple",
"metadataBelow": [
"07-02-2018",
"Morningstar Credit Committee"
],
"href": "#"
}]'>
</mds-list-group>
</mds-search-results>
mds-search-results__link
class to it.Use to display a set of items which share the same metadata, e.g., a list of investments.
Name
|
Identifier
|
---|---|
ASML Holding NV ADR | ASML |
Aspen Technology Inc | AZPN |
Ascendis Pharma A/S ADR | ASND |
Astronics Corp | ATRO |
Astec Industries Inc | ASTE |
Assembly Biosciences Inc | ASMB |
<mds-search-results>
<table class="mds-data-table">
<caption class="mds-data-table__caption">
Description of the data displayed
</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="70%" scope="col">
<div class="mds-data-table__header-cell-inner "> Name </div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--left">
Identifier
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
ASML Holding NV ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASML
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Aspen Technology Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
AZPN
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Ascendis Pharma A/S ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASND
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Astronics Corp
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ATRO
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Astec Industries Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASTE
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Assembly Biosciences Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASMB
</td>
</tr>
</tbody>
</table>
</mds-search-results>
Search results are available at a single size, which uses medium Data Tables, level 8
Headers, and medium List Groups.
Search results are available in three predefined widths: 300px
, 500px
, and fluid
(default). The fluid
width makes search results fill the width of the parent element they are placed within. Width can be configured using props.
Name
|
Identifier
|
---|---|
ASML Holding NV ADR | ASML |
Aspen Technology Inc | AZPN |
Ascendis Pharma A/S ADR | ASND |
Astronics Corp | ATRO |
Astec Industries Inc | ASTE |
Assembly Biosciences Inc | ASMB |
Name
|
Identifier
|
---|---|
ASML Holding NV ADR | ASML |
Aspen Technology Inc | AZPN |
Ascendis Pharma A/S ADR | ASND |
Astronics Corp | ATRO |
Astec Industries Inc | ASTE |
Assembly Biosciences Inc | ASMB |
Name
|
Identifier
|
---|---|
ASML Holding NV ADR | ASML |
Aspen Technology Inc | AZPN |
Ascendis Pharma A/S ADR | ASND |
Astronics Corp | ATRO |
Astec Industries Inc | ASTE |
Assembly Biosciences Inc | ASMB |
<mds-search-results width="300px">
<table class="mds-data-table">
<caption class="mds-data-table__caption">
Description of the data displayed
</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col">
<div class="mds-data-table__header-cell-inner "> Name </div>
</th>
<th class="mds-data-table__header-cell" width="20%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--left">
Identifier
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
ASML Holding NV ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASML
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Aspen Technology Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
AZPN
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Ascendis Pharma A/S ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASND
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Astronics Corp
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ATRO
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Astec Industries Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASTE
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
Assembly Biosciences Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ASMB
</td>
</tr>
</tbody>
</table>
</mds-search-results>
width
prop to fluid
and work with a designer to create custom width styles in your product’s CSS that can be passed via the additionalClass
prop.This example shows how the Empty State component can be placed within search results to communicate to a user that no results have been found for their search.
<mds-search-results width="300px">
<mds-header size="level 8" additional-class="mds-search-results__header">
Securities
<mds-link additional-class="mds-search-results__link" href="#" slot="mds-header-actions" size="small"> See All Results </mds-link>
</mds-header>
<mds-list-group variation="navigation" content='[
{
"text": "Nanotech Fuel Corp",
"metadataBelow": [
"NONOF",
"PINX"
],
"href": "#"
},
{
"text": "Net One Systems Co Ltd ADR",
"metadataBelow": [
"NONEY",
"GREY"
],
"href": "#"
},
{
"text": "Nongshim Co Ltd",
"metadataBelow": [
"NONGF",
"GREY"
],
"href": "#"
}]'>
</mds-list-group>
<mds-header size="level 8" additional-class="mds-search-results__header">
Morningstar Research
</mds-header>
<mds-empty-state class="custom-empty-state-class" size="small" title="No Results" message="Try refining your search string."></mds-empty-state>
</mds-search-results>
This example shows how a <span>
with the mds-search-results--text-match
class can be used to wrap the text content which matches the search term specified by the user. The implementation of the text match styling is not built into the search results component and should be applied by product teams in a way which meets their needs.
Name
|
Identifier
|
---|---|
ASML Holding NV ADR | ASML |
Aspen Technology Inc | AZPN |
Ascendis Pharma A/S ADR | ASND |
Astronics Corp | ATRO |
Astec Industries Inc | ASTE |
Assembly Biosciences Inc | ASMB |
<mds-search-results width="300px">
<table class="mds-data-table">
<caption class="mds-data-table__caption">
Description of the data displayed
</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="70%" scope="col">
<div class="mds-data-table__header-cell-inner "> Name </div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--left">
Identifier
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">AS</span>ML Holding NV ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>ML
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>pen Technology Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
AZPN
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>cendis Pharma A/S ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>ND
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>tronics Corp
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
ATRO
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>tec Industries Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>TE
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>sembly Biosciences Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>MB
</td>
</tr>
</tbody>
</table>
</mds-search-results>
$mds-space-1-x
constant to position the container relative to the triggering Search Field.mds-search-results--text-match
) to highlight the characters which match the user’s search term. This provides additional context about why an item is showing up in within a set of search results. The application of this class is not built into the component and needs to be implemented by product teams.layered
prop to false
. This allows teams to consistently implement search results in contexts where the layered container approach is not appropriate, e.g., a search results page. Enter
while in the search field or presses a related button intended to execute the search.
Class
|
Applies to
|
Outcome
|
---|---|---|
|
|
Applies text match background styling. |
|
|
Applies search results header-specific styling. |
When setting props as attributes on a custom HTML element, use kebab-case
instead of camelCase
.
Prop
|
Type
|
Validation
|
Default
|
Description
|
---|---|---|---|---|
|
String |
— |
— |
A space-separated list of class names that will be appended to the default |
|
Boolean |
— |
|
If |
|
String |
One of: |
|
Alters the width of the search results. |
Pass content in between the <mds-search-results></mds-search-results>
tags to set the search results content.
Creating stacked search results using List Groups with Metadata Below and Headers with Links in their mds-header-actions
named slots:
<mds-search-results>
<mds-header size="level 8" additional-class="mds-search-results__header">
Securities
<mds-link additional-class="mds-search-results__link" href="#" slot="mds-header-actions" size="small"> See All Results </mds-link>
</mds-header>
<mds-list-group variation="navigation" content='[
{
"text": "Apple Inc",
"metadataBelow": [
"AAPL",
"NASDAQ"
],
"href": "#"
},
{
"text": "Appleseed Institutional",
"metadataBelow": [
"APPIX",
"NASDAQ"
],
"href": "#"
},
{
"text": "Appleseed Investor",
"metadataBelow": [
"APPLX",
"NASDAQ"
],
"href": "#"
}]'>
</mds-list-group>
<mds-header size="level 8" additional-class="mds-search-results__header">
Morningstar Research
<mds-link additional-class="mds-search-results__link" href="#" slot="mds-header-actions" size="small"> See All Results </mds-link>
</mds-header>
<mds-list-group variation="navigation" content='[
{
"text": "Apple Shares Look Attractice",
"metadataBelow": [
"01-03-2019",
"Abhinav Davuluri"
],
"href": "#"
},
{
"text": "Apple Under Review",
"metadataBelow": [
"12-20-2018",
"Abhinav Davuluri"
],
"href": "#"
},
{
"text": "Credit Rating Initiation: Apple",
"metadataBelow": [
"07-02-2018",
"Morningstar Credit Committee"
],
"href": "#"
}]'>
</mds-list-group>
</mds-search-results>
Creating tabular search results with text match styling using the Data Table component and implementing a <span>
with the mds-search-results--text-match
to wrap the text content which matches the search term specified by the user. The wrapping of text content is not built into the search results component and should be implemented by product teams in a way which meets their needs:
<mds-search-results>
<table class="mds-data-table">
<caption class="mds-data-table__caption">
Description of the data displayed
</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col">
<div class="mds-data-table__header-cell-inner "> Name </div>
</th>
<th class="mds-data-table__header-cell" width="20%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--left">
Identifier
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">AS</span>ML Holding NV ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>ML
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>pen Technology Inc
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
AZPN
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell" scope="row">
<a href="#" class="mds-link mds-link--no-underline">
<span class="mds-search-results--text-match">As</span>cendis Pharma A/S ADR
</a>
</td>
<td class="mds-data-table__cell mds-data-table__cell--left">
<span class="mds-search-results--text-match">AS</span>ND
</td>
</tr>
</tbody>
</table>
</mds-search-results>