Global Search
Usage
Global Search component contains two types of slots: searches and pages.
Developer can use fds-global-search-group
for searches slot, fds-global-search-page
for pages slot and fds-global-search-summary
for summary slot.
fds-global-search-group
contains two inputs:
- title: string, display as the search group title.
- items: FdsSearchItem[], a list of search item to display in the search group
fds-global-search-page
contains two inputs:
- title: string, display as the search page title.
- items: FdsSearchPageItem[], a list of search page item to display in the search page.
fds-global-search-summary
contains two inputs:
- searchText: string, the search text to summary.
- resultCount: number, how many results exist for current search text.
Install package:
npm i @finastra/global-search
Import component to your project:
import '@finastra/global-search';
<fds-global-search
placeholder="search marketplace">
<fds-global-search-group
slot="searches"
title="Trending Searches"
icon="trending_up"
items=${ [{
text: 'enterprise risk',
},{
text: 'customer service',
}]
}
> </fds-global-search-group>
<fds-global-search-page
slot="pages"
title=${"Popular applications"}
.items=${
[
{
logo: '//us1-cdn.openchannel.io/59bfc432ca753d60bf995c46/public/603e561d130c5a04da2d3d7c.jpg',
text: "CloudMargin"
}
]
}
> </fds-global-search-page>
</fds-global-search>
API
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
enableRecentSearch |
enableRecentSearch |
boolean |
true | Whether display recent search section. |
placeholder |
placeholder |
string |
"" | Sets placeholder value displayed when input is empty. |
value |
value |
string |
"" | Sets value displayed in input. |
Methods
Method | Type |
---|---|
addNewRecentSearch |
(searchText?: string | undefined): void |
clearInput |
(e: any): void |
closeGlobalSearch |
(): void |
getRecentList |
(): FdsSearchItem[] |
getSearchInputElement |
(): HTMLInputElement | null | undefined |
getSearchInputValue |
(): string |
onGlobalSearchInputChanged |
(): void |
onGlobalSearchInputFocus |
(): void |
renderRecentSearch |
(): TemplateResult<1> | "" |
setInput |
(text: string): void |
toggleGlobalSearch |
(): void |
toggleSearchClearButton |
(display: boolean): void |
triggerSearchWithText |
(e: any): void |
updateRecentSearch |
(): void |
Events
Event | Type |
---|---|
onFdsGlobalSearchItemSelected |
CustomEvent<FdsSearchSelectedItem> |
onSearchInputChanged |
CustomEvent<string> |
Slots
Name | Description |
---|---|
pages |
Slot to place a set of search pages with icon.We provide another web component: fds-global-search-page. |
searches |
Slot to place a set of search items. We provide another web component:fds-global-search-group. |
summary |
Slot to place a summary of search result. |
CSS Custom Properties
Property | Type | Default | Description |
---|---|---|---|
--fds-global-search-width |
text | "400px" | length of global search component. |