@josros/autocomplete NPM

josros-autocomplete

A basic auto-completion Web Component.

Installation

Install dependency
npm install @josros/autocomplete --save
ES6 import
import "@josros/autocomplete";

Use the component

<josros-autocomplete
    label='Your label'
></josros-autocomplete>

Usage

Set data

Here is how you can set the items property on a normal website:

document.querySelectorAll('josros-autocomplete').forEach(element => {
    element.setAttribute('items', JSON.stringify([{'text': 'Hello'}, {'text': 'Hallo'}, {'text': 'Hola'}, {'text': 'Bonjour'}]));
})

Component Api

Properties

Attribute	Description	Type	Default
`value`	Initial value of the text field	`String`	`""`
`label`	Label of the text field	`String`	`""`
`items`	Auto completion items (suggestions)	`[{ text!: string, value?: any}]`	`[]`
`loading`	Toggles loading state	`boolean`	`false`
`max-suggestion-items`	Max. elements suggested	`number`	`15`
`no-border`	Disables borders around input text field	`boolean`	`false`
`outline`	Disables outline around input text field	`boolean`	`false`
`highlight-bottom-line`	Enables bottom line highlighting around input text field on focus (disabled if noBorder is defined)	`boolean`	`false`

Events

Event	Description
`selected`	Fired as soon as a suggestion is selected (via keyboard or mouse)
`autocomplete-input`	Fires on text changes
`changed`	Fires on internal input change event
`blurred`	Fires on internal input blur event
`focussed`	Fires on internal input focus event
`enter-pressed`	Fire as soon as enter is pressed on the input

CSS Custom Properties

Name	Description	Default
`--josros-autocomplete--font-size`	The font-size of the host	1rem
`--primary-color`	Primary color	#000
`--background-color`	Background color	transparent
`--foreground-color`	Foreground color	rgba(0, 0, 0)
`--item-background-color`	Background color of the suggestion items	`lightgrey`
`--item-focus-color`	Background color of the suggestion items shown when input gets focus	#e0e0e0
`--loader-color`	Color of the loading animation	rgb(0, 136, 204)
`--font-size`	Font size of the input text	1.6em
`--padding`	Padding of the input	1.2em 0em 0.4em 0em
`--padding--label`	Padding of the label above the input	0em
`--padding--suggestion`	Padding of a single suggestion box	1.5em
`--margin--suggestions`	Margin of the whole suggestion container	0em
`--max-height--suggestions`	Max height of the suggestion container	20em
`--input-default-border`	Border around the input text field	none
`--input-default-border-bottom`	Bottom border around the input text field	0.1em solid var(--primary-color, grey)

Execution

# production build
npm run build

# run dev server at http://localhost:3000
npm run serve

# unit tests
npm run test:unit

# e2e tests
npm run test:e2e

# Lintting
npm run lint