What's Changed

• Use chromium for karma tests by @theinterned in #26
• Add a .devcontainer by @koddsson in #27
• Add a release action by @koddsson in #29
• move AOR to primer by @keithamus in #30
• Add event detail - eventType to 'remote-input-success' customEvent by @kendallgassner in #34

New Contributors

• @theinterned made their first contribution in #26
• @kendallgassner made their first contribution in #34

Full Changelog: v0.3.1...v0.4.0

• fix: output umd build for main key #19

v0.3.0...v0.3.1

• Remove text/html; fragment from accept header (#22)

v0.2.1...v0.3.0

• Accept text/fragment+html as a content-type (#21)

github/auto-complete-element@v0.2.0...v0.2.1

• Replace Flow + Babel toolchain with TypeScript #15
• Remove private state from public API #16
• Abort in-flight requests #17

• Fixed parsing for relative URL in src #13

• types(ts): add window declaration a89754c
• Fix example 6695790

v0.1.0...v0.1.1

• Fixed #10 via #11: Only append response text if the response was successful.
• Added new events:
  • remote-input-success: fired when response is successful and HTML is set.
  • remote-input-error: fired when response is not successful.

• Merge pull request #8 from github/publish-to-gpr-as-well b24d7b5
• publish to GPR as a postpublish step 7923480

v0.0.6...v0.0.7

<remote-input> element

An input element that sends its value to a server endpoint and renders the response body.

Installation

$ npm install @github/remote-input-element

Usage

import '@github/remote-input-element'

<!-- Filter a list of items from the server -->
<remote-input src="/query" aria-owns="results">
  <input>
</remote-input>
<ul id="results"></ul>

A GET request will be sent to /query?q=${input.value}.

The parameter name (q) is customizable with the [param] attribute:

<!-- Live preview of Markdown -->
<remote-input src="/preview" aria-owns="md-preview" param="body">
  <textarea></textarea>
</remote-input>
<div id="md-preview"></div>

Styling loading state

A boolean [loading] attribute is added to <remote-input> when a network request begins and removed when it ends.

.loading-icon { display: none; }
remote-input[loading] .loading-icon { display: inline; }

Events

const remoteInput = document.querySelector('remote-input')

// Network request lifecycle events.
remoteInput.addEventListener('loadstart', function(event) {
  console.log('Network request started', event)
})
remoteInput.addEventListener('loadend', function(event) {
  console.log('Network request complete', event)
})
remoteInput.addEventListener('load', function(event) {
  console.log('Network request succeeded', event)
})
remoteInput.addEventListener('error', function(event) {
  console.log('Network request failed', event)
})

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.