auto-complete-element
Auto-complete input values from server search results.
<auto-complete> element
Auto-complete input values from server search results.
Installation
$ npm install --save @github/auto-complete-element
Usage
import '@github/auto-complete-element'
<auto-complete src="/users/search" aria-owns="users-popup">
<input type="text">
<ul id="users-popup"></ul>
</auto-complete>
The server response should include the items that matched the search query.
<li role="option">Hubot</li>
<li role="option">Bender</li>
<li role="option">BB-8</li>
<li role="option" aria-disabled="true">R2-D2 (powered down)</li>
The data-autocomplete-value
attribute can be used to define the value for an
item whose display text needs to be different:
<li role="option" data-autocomplete-value="bb8">BB-8 (astromech)</li>
Attributes
open
is true when the auto-complete result list is visiblevalue
is the selected value from the list or the empty string when cleared
Events
const completer = document.querySelector('auto-complete')
// Network request lifecycle events.
completer.addEventListener('loadstart', function(event) {
console.log('Network request started', event)
})
completer.addEventListener('loadend', function(event) {
console.log('Network request complete', event)
})
completer.addEventListener('load', function(event) {
console.log('Network request succeeded', event)
})
completer.addEventListener('error', function(event) {
console.log('Network request failed', event)
})
// Auto-complete result events.
completer.addEventListener('auto-complete-change', function(event) {
console.log('Auto-completed value chosen or cleared', completer.value)
console.log('Related input element', event.relatedTarget)
})
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @github/combobox-nav#^0.2.3
- Released
- 2019-04-16
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent
auto-complete-element - Vaadin Add-on Directory
Auto-complete input values from server search results.# <auto-complete> element
Auto-complete input values from server search results.
## Installation
```
$ npm install --save @github/auto-complete-element
```
## Usage
```js
import '@github/auto-complete-element'
```
```html
```
The server response should include the items that matched the search query.
```html
Hubot
Bender
BB-8
R2-D2 (powered down)
```
The `data-autocomplete-value` attribute can be used to define the value for an
item whose display text needs to be different:
```html
BB-8 (astromech)
```
## Attributes
- `open` is true when the auto-complete result list is visible
- `value` is the selected value from the list or the empty string when cleared
## Events
```js
const completer = document.querySelector('auto-complete')
// Network request lifecycle events.
completer.addEventListener('loadstart', function(event) {
console.log('Network request started', event)
})
completer.addEventListener('loadend', function(event) {
console.log('Network request complete', event)
})
completer.addEventListener('load', function(event) {
console.log('Network request succeeded', event)
})
completer.addEventListener('error', function(event) {
console.log('Network request failed', event)
})
// Auto-complete result events.
completer.addEventListener('auto-complete-change', function(event) {
console.log('Auto-completed value chosen or cleared', completer.value)
console.log('Related input element', event.relatedTarget)
})
```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.