@finastra/global-search NPM

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:

fds-global-search-page contains two inputs:

fds-global-search-summary contains two inputs:

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.