web-complete is a lightweight, dependency-free, styleable autocomplete web component.

Installation

Script tag

<script type="module" src="https://unpkg.com/web-complete"></script>
<script nomodule src="https://unpkg.com/web-complete/dist/web-complete/web-complete.js"></script>

Node Module

• Install via npm: npm install web-complete --save
• Add script to html: <script src='node_modules/web-complete/dist/web-complete.js'></script>
• Or import as JS module: import 'web-complete';

Framework integration

For integration with different frameworks the stencil docs should be consulted.

Using this component

Add the component to your html:

<web-complete id="my-web-complete"></web-complete>

Add some javascript for additional configuration:

const webcomplete = document.querySelector('#my-web-complete');

// change css classes for styling
webcomplete.cssClasses = {
  "wrapper": "dropdown",
  "input": "form-control",
  "suggestions": "dropdown-menu show",
  "suggestion": "dropdown-item",
  "active": "active"
};

// add an async suggestion generator
webcomplete.suggestionGenerator = function(text) {
  return new Promise(function(resolve, reject) {
    // generate suggestions with input text
    // e.g. by using http fetch 
  });
};

// listen to selected/unselected events
webcomplete.addEventListener('selected', function(e) {
  // suggestion selected (e.detail)
});
webcomplete.addEventListener('unselected', function(e) {
  // suggestion unselected (e.detail)
});

A full example with Bootstrap 4 Dropdown theming can be found here.

Component API

Properties

Events

Methods

clear() => Promise<void>

Clears the form field (suggestions and selection)

Returns

Type: Promise<void>

getText() => Promise<string>

Returns the text of the selected item

Returns

Type: Promise<string>

getValue() => Promise<string>

Returns the value of the selected item

Returns

Type: Promise<string>

Developer

npm i            install dependencies
npm start        start local development 
npm run build    build component for production
npm test         run e2e tests