The Search Field component provides a user interface for keyword searching. It consists of an "input field", where the user can input her search term, a "search button", to allow the user to initiate a search action, and a "dropdown menu", which allows selection of suggested search terms. Optionally, there can be a "category dropdown menu", to allow the user to add category context to their search.

The input field will have "clear" input button, represented by a cancel ("X") icon.

<fdp-search-field
    [placeholder]="'Search'"
    [suggestions]="suggestions"
    [inputText]="inputText"
    [size]="'medium'"
    [categories]="categories"
    [categoryLabel]="'Category'"
    [isLoading]="loading"
    [hideButtonBorder]=true
    (inputChange)="onInputChange($event)"
    (searchSubmit)="onSearchSubmit($event)"
    (cancelSearch)="onCancelSearch()">
</fdp-search-field>

The "placeholder" property allows the user to set the "placeholder" text for the input field.

The "suggestions" property accepts an array of SuggestionItems (or Observable of SuggestionItems), and uses these values to populate the dropdown menu of suggested search terms.

The "inputText" property sets the value of the input field.

The "size" property sets the vertical height of the search input component. There are two sizes allowed: "medium" (height: 36px) and "small" (height: 28px).

This is an optional field. If it is not set it will default to "medium".

Default value: "medium"

The "categories" property is an array of ValueLabelItems which are used to populate the dropdown menu for category selection.

If the "categories" property is set, then the category button and dropdown menu will be displayed next to the input text field. If the "categoryValues" property is null, undefined or the length of the array is zero, then the category button will not be displayed.

The "categoryLabel" property is a string value which sets the initial text of the category button.

The user has the option of hiding the category label by setting the "hideCategoryLabel" property to "true". With "hideCategoryLabel" true the category button will be displayed in its compact form.

The "isLoading" property, when set to "true", will put the component in a loading state. In the loading state, the search button icon will be replaced by a loading icon. When the user hovers over the search button, while in loading state, the loading icon will turn into a cancel icon.

Clicking on the search button with the cancel icon will emit a cancelSearch event, and the icon will turn back to a search icon.

The "hideButtonBorder" when set to true will remove the border between the input field and search button.

The "inputChange" event binding emits an event with a SearchInput payload, whenever the user types (or deletes) a character in the input field.

A "inputChange" event is also emitted when the category selector is changed, and when the user "clears" the input field.

The "searchSubmit" event binding emits an event with a SearchInput payload whenever the user clicks on the search button, or when the user hits enter in the input field.

If the input field is empty, a "searchSubmit" event will not be emitted.

The "cancelSearch" event binding emits an event whenever the user clicks on the search button with a cancel icon, which the component is in loading state.

N/A

N/A

export interface SearchInput {
    value: string;     // search keyword text
    category: string; // category value
}

export interface SuggestionItem {
    value: string;         // text of suggestion which appears in dropdown
    isHistorical: boolean; // is the suggestion pulled from user history
    data: any;             // additional application data
}

export interface ValueLabelItem {
    value: string;   // value of item
    label: string;   // display label for item
}

export type SearchFieldSize = 'small' | 'medium';

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: Yes

categoryLabel has a default value assigned "Category" which would need to be translated as per guidelines in the document.

• placeholder attribute can be supported with string binding:

<fdp-search-field 
   i18n-placeholder="@@search"
   placeholder="Search"
   [suggestions]="suggestions" 
   [categories]="categories"
   (searchSubmit)="onSearchSubmit($event)" 
   (inputChange)="onInputChange($event)">
</fdp-search-field>

Redesign Required: Yes

suggestions and categories come from an array of objects, but this is not handled for individual items. Therefore redesign is needed.

• Does clicking on the "clear input" button reset the category selection?
• Fundamentals are deprecating this component in favor Combobox (Autocomplete)
  • This component was originally used only in the shellbar and Combobox has the same functionality as I was told by Jedrzej.
    • I disagree. While Combobox and SearchInput have some of the same UI features, to me they are functionally different. A Combobox primarily is used to select a value from a list of values, where as the SearchInput is used to initiate a search with an inputted search term. They both have a dropdown menu but where the Combobox should force the user to choose one of the valid options in the menu, in the SearchInput case the dropdown menu is only there to suggest possible search terms. In fact in the SearchInput case, the dropdown suggestions should be optional, as the application may or may not have a service for type-ahead suggestions. Additionally, from the FRD, there are required features which are particular to the SearchInput and may not make sense for Combobox like "loading state", "cancel search button", and "category dropdown". I think it would be easier for the end user to be presented with two distinct components which have different contextual uses - use Combobox in a form context where you want the user to choose a value (or values) from a list, and use the SearchInput in a search context where you want the user to enter a search term (and possibly a category value). - Kevin
  • styles starting 0.2.0. - removed this completly (no supporting styles)
  • This make sense as Combobox has autocomplete feature plus can trigger search + can be part of the form - more reusable but we might need other usecases

• Let's rename dropdownValues to suggestions and have this common across all components that accepts list of values shows some search result in place. From first look, you are not sure if dropdownValues is a input source for it or suggestion.
  And we are showing how it is implemented internally. What if we change the implementation in the future? are we going to rename it?

• size just like any other input where we have predefined list of values should not be a string but we will create a type e.g.:

   export type SearchInptSize = 'small' | 'big' ...

• Do we need to support handling complext object?
  • Again if allow application to use this to search e.g. over purchase order like I think this will be the case, we need to suport complext object.
  • e.g.: Accepting list of purchase order, plus once something is selected I want to set purchase order.

Based on discussion with kevin, its unclear what all usecases we need to support:

• Google/Amazon like search?

  • Type keyword, it will give you some suggestion, you click on suggestion and you narrow down the search to get several items to pick up

• Specific Entity Search, where you are searching specific type, such purchase Order:

  • Start typing e.g: Microsoft and you will give you suggestions like PO1233, Microsoft, New Laptop for Sushma PO1234, Microsoft, Contractor.. PO1234, Microsoft, New Laptop for Sushma
  • You select one and you get to the detail of that specific record.
  • I can image usage for Ariba Buyer, where Category values will be [Requisition, Purchase Order, Receipt, Invoice] and you select one and start your search on top of specific entity