eck-autocomplete

eck-autocomplete

Autocomplete web component. Suggests options for an input.

Usage

Recommended global CSS

The styles of a custom element can only take effect after the JavaScript has been parsed. This leads to initially unstyled components. This is especially bad in a case like this autocomplete where the content is hidden by default. To prevent this so called FOUC (Flash of unstyled content) you can predefine the default styling globally like this:

/**
  * Global FOUC (Flash of unstyled content) fix specific for autocomplete
  */
eck-autocomplete:not(:defined) {
  display: none;
}

CDN

<script
  type="module"
  src="https://unpkg.com/eck-autocomplete@0.0.11/min/eck-autocomplete.js"
></script>

Package and import

npm i eck-autocomplete --save-exact

Import the entry point that will automatically register the custom elements if they aren't already registered.

import 'eck-autocomplete';

Changelog

0.0.11

• feat: add property method to manually provide an input reference
• fix: only highlight option if it exists
• refactor: remove hasKeyboardHighlight in favor of attribute
• refactor: replace value attribute with property
• feat: scroll highlighted option into view
• feat: use floating-ui for the overlay panel
• feat: use 'fixed' positioning all the time
• perf: remove event listeners from connected input ref
• feat: allow CSS injection
• feat: add select-highlighted-option which is active by default
• refactor: rename and split select and highlight event and don't bubble highlight
• feat: open panel when clicking on input
• fix: keyboard input should be ignored when a modifier key is pressed at the same time