# <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.