Skip to content

marksolutions/mark-autocomplete

Repository files navigation

<mark-autocomplete> Published on npm

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.