@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
51 lines (50 loc) • 2.87 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 locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
<form action="" id="form">
<h2>Suggestion list passed in a property</h2>
<pb-autocomplete name="autocomplete1" placeholder="Greek letter name" suggestions='["alpha", "beta", "gamma"]' value="alpha"></pb-autocomplete>
<h2>Suggestion list supplied by remote XQuery</h2>
<!--pb-autocomplete name="autocomplete2" placeholder="query" source="modules/autocomplete.xql"></pb-autocomplete-->
<pb-autocomplete name="autocomplete2" placeholder="query" source="api/search/autocomplete"></pb-autocomplete>
<h2>Static remote suggestion list loaded once upon initialization</h2>
<pb-autocomplete name="autocomplete3" placeholder="language" source="demo/select.json" preload></pb-autocomplete>
<h2>Combine with other form fields whose value is passed on</h2>
<!--pb-autocomplete name="autocomplete3" placeholder="query" source="modules/autocomplete.xql"-->
<pb-autocomplete name="autocomplete3" placeholder="query" source="api/search/autocomplete">
<select name="field">
<option value="title">Title</option>
<option value="author">Author</option>
</select>
</pb-autocomplete>
<button type="submit"><paper-button>Submit</paper-button></button>
</form>
<p>Parameters which would be sent: <code id="output"></code></p>
</pb-page>
<script>
const form = document.getElementById('form');
form.addEventListener('submit', (ev) => {
ev.preventDefault();
const data = new URLSearchParams(new FormData(form)).toString();
document.getElementById('output').innerHTML = data;
});
</script>
</template>
</pb-demo-snippet>
</body>
</html>