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. |

CSS Custom Properties

| Property | Type | Default | Description | |-----------------------------|------|---------|------------------------------------| | --fds-global-search-width | text | "400px" | length of global search component. |