@brightspace-ui-labs/autocomplete

d2l-labs-autocomplete

Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

• Design organization buy-in
• design.d2l entry
• Architectural sign-off
• Continuous integration
• Cross-browser testing
• Unit tests (if applicable)
• Accessibility tests
• Visual diff tests
• Localization with Serge (if applicable)
• Demo page
• README documentation

Polymer-based web component for integrating autocomplete with text inputs

Installation

npm install @brightspace-ui-labs/autocomplete

Components

Text Input

<d2l-labs-autocomplete-input-text id="my-autocomplete"></d2l-labs-autocomplete-input-text>

const autocomplete = document.getElementById('my-autocomplete')
autocomplete.data = [
	{ value: 'Option 1' },
	{ value: 'Option 2' }
]

/**
 * The filter function can be changed - it should accept two arguments (value, filter)
 * and return true if `value` should be in the filtered list.
 * E.g., Only return values that match the entered filter exactly
 */
autocomplete.filterFn = (value, filter) => value === filter;

Custom Input

<d2l-labs-autocomplete id="my-autocomplete">
	<input id="my-input" slot="input">
</d2l-labs-autocomplete>
<!-- Set data as above -->

Remote Source

Set remote-source on the autocomplete.

Add an event listener for the d2l-labs-autocomplete-filter-change event, and set the suggestions manually after fetching the filtered options.

E.g.,

<d2l-labs-autocomplete-input-text id="my-autocomplete" remote-source></d2l-labs-autocomplete-input-text>

autocomplete.addEventListener('d2l-labs-autocomplete-filter-change', event => {
	fetchResultsFromRemoteSource(event.detail.value)
		.then(results => autocomplete.setSuggestions(results))
})

Events

• d2l-labs-autocomplete-filter-change (remote source only)
  • Emitted whenever the filter changes, provided the filter is at least min-length characters long (default: 1). Also fires when the input is cleared.
• d2l-labs-autocomplete-suggestion-selected
  • Emitted when a suggestion from the dropdown is selected (keyboard or mouse).

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

npm run test:polymer:local

To lint AND run local unit tests:

npm test

Versioning, Releasing & Deploying

All version changes should obey semantic versioning rules.

Include either [increment major], [increment minor] or [increment patch] in your merge commit message to automatically increment the package.json version, create a tag, and trigger a deployment to NPM.