TypeaheadField
TypeaheadField provides a generic way to implement a form field in which the user can search for available items.
Demo
Required Imports
import { TypeaheadFieldModule } from 'nextsapien-component-lib';
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | entityFunctions | A set of functions describing how to work with a generic entity. Includes a function defining how to search for entities, how to map them to ItemSummarys, and how to filter unwanted entities from the search results. | { searchFunction: (value: string) => any[], mappingFunction: (entity: any) => ItemSummary<any>, filterFunction: (entity: any) => boolean } [] | true | n/a | n/a
Input | sortingFunction | A function defining how to sort the returned search results, | (a: ItemSummary<any>, b: ItemSummary<any>) => number | true | n/a | n/a
Input | selectionFunction | A function defining what to do when a result is selected. If not defined, the selected Output Event is emitted instead. | (item: ItemSummary<any>) => void | false | n/a | n/a
Input | placeholderText | Sets the placeholder text for the SearchBar | string | false | '' |
Input | resultLimit | The maximum number of results that will be displayed in the dropdown. If 0, no limit. | number | false | 0 |
Input | alternateText | Text to display below the results. Offers the user an option if the result they are expecting isn't found. | string | false | '' |
Input | alternateFunction | A function to execute if the UI element corresponding to alternateText is clicked. Passes the current input text as an argument. | (value: string) => any | false | n/a | n/a
Input | defaultText | This sets a default value for the search string. | string | false | n/a |
Input | error | If set, the border around the typeahead becomes red and the error text is displayed below the search field. | string | false | '' |
Input | suggestionText | Text to be displayed below the typeahead indicating that there are suggested results. | string | false | '' |
Input | defaultSearchString | The search string to be used when the user clicks the suggestionText. The string will not be displayed. Use defaultText if that functionality is desired. | string | false | '' |
Input | required | Tells the TypeaheadField if this is a required field. If true, an indicator displays next to the label. | boolean | false | false |
Output | searchStringChange | Indicates that the search string has changed. | Observable < string > | n/a | n/a |
Output | selected | Indicates that an item was selected. The event contains the selected ItemSummary. | ItemSummary | n/a | n/a | n/a
Output | deselect | Indicates that an item was deselected. | null | n/a | n/a | n/a
Input | groups | Array of grouped search results to be displayed in the typeahead component.
Input | loading | Indicates whether search results are loading or not.
Output | alternateCalled | Event emitted when the alternate function is called.
Input | selectedEntityIndex | Index of the currently selected entity in the entityFunctions array.
Input | fieldName | Name of the input field for the typeahead component.
Input | defaultText | Default text to display in the input field.
Input | isMultiselectMode | Indicates if the typeahead supports multi-selection of items.
Input | rowEditConfirmationObsv | Observable to confirm row edits when interacting with the typeahead.
Input | entitySelectMode | Indicates if the component is in entity selection mode.
Input | showRequiredIndicator | Displays an indicator showing the field is required.
Output | inputStringChange | Event that emits the current search string entered by the user.

Example usage
`{{ typeaheadCode }}`