@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
37 lines (35 loc) • 1.46 kB
HTML
<html>
<head>
<title>Using pb-autocomplete</title>
<style>
pb-autocomplete {
margin-bottom: 20px;
}
select {
margin-right: 10px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
</head>
<body>
<h1>Using pb-autocomplete</h1>
<pb-demo-snippet>
<template>
<pb-page>
<form action="" id="form">
<h2>Static remote suggestion list loaded once upon initialization</h2>
<pb-autocomplete name="autocomplete3" placeholder="language" source="select.json" preload substring></pb-autocomplete>
<p>Selected: <span id="selected"></span></p>
</form>
</pb-page>
<script>
window.addEventListener('WebComponentsReady', () => {
pbEvents.subscribe('pb-autocomplete-selected', null, (ev) => {
document.getElementById('selected').innerHTML = `${ev.detail.value } = ${ ev.detail.text}`;
});
});
</script>
</template>
</pb-demo-snippet>
</body>
</html>