<mark-autocomplete>

The mark-autocomplete web component provides a customizable autocomplete input field with suggestions.

Installation

To use mark-autocomplete in your project, you can install it via npm:

npm i @markai/mark-autocomplete

Usage

Import the component in your JavaScript/TypeScript file:

import '@markai/mark-autocomplete';

Then, you can use it in your HTML:

<mark-autocomplete></mark-autocomplete>

API

Properties/Attributes

| Name | Type | Default | Description | | ------------------ | ---------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | value | string | '' | Contains the current value of the input field. | | valueExpression | string | undefined | Property of the local data source to use as the value property. | | items | T[] | [] | List of selectable items. | | selectedItem | T | undefined | An item corresponding to the current value. | | itemsProvider | Promise<T[]> | undefined | Function to provide items based on a query string. | | opened | boolean | false | Whether the suggestions list is opened or not. | | maxViewableItems | number | 7 | Maximum number of suggestions to be displayed without scrolling. | | highlightFirst | boolean | false | Whether or not it will always highlight the first result each time new suggestions are presented. | | itemTextProvider | (item: T) => string | undefined | Provides value that represents in list item | | textExpression | string | undefined | An expression (dot-separated properties) to be applied on Item, to find it's value. When itemTextProvider is specified, this is ignored. | | renderItem | () => TemplateResult | undefined | Provides any Block element to represent list items. Integrator listens to the ‘click’ event to know whether the selection is changed or not. |

Events

| Name | Description | | -------- | ----------------------------------------- | | change | Triggered when the selected item changes. |

Methods

| Name | Description | | --------- | ---------------------------- | | open() | Opens the suggestions list. | | close() | Closes the suggestions list. |

License

• This component is provided under the MIT License.