← Back

auto-complete-element

Auto-complete input values from server search results.

Author

Rating

Popularity

<100

<auto-complete> element

Name: auto-complete-element
Availability: InStock
Author: github

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 visible
value 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.

Compatibility

(Loading compatibility data...)

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 ``` The `data-autocomplete-value` attribute can be used to define the value for an item whose display text needs to be different: ```html ``` ## 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.

Directory