-
Notifications
You must be signed in to change notification settings - Fork 7
/
demo.html
92 lines (72 loc) · 2.27 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Ajax auto-complete datalist demonstration</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="module" src="./dist/datalist-ajax.min.js"></script>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 100%;
color: #222;
background-color: #fafafe;
margin: 1em;
}
label, button {
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>HTML5 Ajax auto-complete datalist demonstration</h1>
<form id="autoform">
<label for="country">country lookup:</label>
<auto-complete
api="https://restcountries.com/v3.1/name/${country}?fields=name,cca2,region"
resultname="name.common"
querymin="2"
optionmax="50"
valid="please select a valid country"
>
<input type="text" id="country" name="country" size="50" required />
</auto-complete>
<label for="region">country region:</label>
<input type="text" id="region" name="region" size="10" data-autofill="region" readonly />
<label for="countrycode">country code:</label>
<input type="text" id="countrycode" name="countrycode" data-autofill="cca2" size="2" readonly />
<label for="artist">music artist lookup:</label>
<auto-complete
id="artistauto"
api="https://musicbrainz.org/ws/2/artist?query=artist:${artist}%20AND%20country:${countrycode}&limit=21&fmt=json"
resultdata="artists"
resultname="name"
querymin="1"
optionmax="100"
>
<input type="text" id="artist" name="artist" size="50" required />
</auto-complete>
<label for="artisttype">artist type:</label>
<input type="text" id="artisttype" name="artisttype" data-autofill="artistauto.type" size="10" readonly />
<button type="submit">submit</button>
</form>
<script type="module">
(() => {
// stop form submission and output field names/values to console
const form = document.getElementById('autoform');
form.addEventListener('submit', e => {
e.preventDefault();
console.log('Submit disabled. Data:');
const data = new FormData(form);
for (let nv of data.entries()) {
console.log(` ${ nv[0] }: ${ nv[1] }`);
}
});
})();
</script>
</body>
</html>