Skip to content

Instantly share code, notes, and snippets.

@mdmower

mdmower/autocomplete-script-bind-example.html

Created February 15, 2020 07:28
Show Gist options
  • Save mdmower/776c3bf4db4d59d82a67b96439fba28b to your computer and use it in GitHub Desktop.
Save mdmower/776c3bf4db4d59d82a67b96439fba28b to your computer and use it in GitHub Desktop.
Download ZIP
amp-autocomplete + amp-bind + amp-script testing
Raw
autocomplete-script-bind-example.html
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>autocomplete testing</title>
<link rel="canonical" href="autocomplete-testing.html" >
<meta name="viewport" content="width=device-width,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<meta name="amp-script-src" content="sha384-DYxIFXpU4kmJjfzvb4W5twGuG3Rn__B7WPoTFqdXBrJHylbvFKQJEv-tBUq7lSiC"></head>
<style amp-custom>
body {
margin: 0;
padding: 0.5em;
font-family: sans-serif;
}
</style>
</head>
<body>
<h3>amp-autocomplete + amp-bind + amp-script testing</h3>
<amp-autocomplete filter="substring">
<amp-script script="search-script">
<div>
<input type="text" name="search" id="search" on="input-debounced:AMP.setState({search: event.value});change:AMP.setState({search: event.value})"> <a id="asAnchor" href="">This anchor is updated by amp-script</a>
</div>
</amp-script>
<script type="application/json">
{
"items": ["apple", "orange", "banana"]
}
</script>
</amp-autocomplete>
<p>
<a id="abAnchor" href="" [href]="search ? '?q=' + search : ''">This anchor is updated by amp-bind</a>
</p>
<script id="search-script" type="text/plain" target="amp-script">
const asAnchor = document.getElementById('asAnchor');
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', function (e) {
console.log('input event; value: ' + searchInput.value);
asAnchor.setAttribute('href', '?q=' + searchInput.value);
});
searchInput.addEventListener('change', function (e) {
console.log('change event; value: ' + searchInput.value);
asAnchor.setAttribute('href', '?q=' + searchInput.value);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment