Directory

← Back

auto-complete-element

Auto-complete input values from server search results.

Author

Rating

Popularity

<100

<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 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 - Vaadin Add-on Directory
# <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.
    Online