autocomplete/autocomplete.html at master · RichCaloggero/autocomplete · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>autocomplete</title>

<style>
/*[role=listbox] > [aria-selected='true']::before {content: ">>";}*/ /* for testing; remove in production */
.combobox [role=listbox].hidden {display: none};
[role=listbox] {list-style-type: none;}
[role=listbox] > :focus, [role=listbox] > :hover {border: 1px dotted;}

.off-screen {
position: absolute;
left: -99999px; top: -99999px;
width: 1px; height:; 1px;
overflow: hidden;
}

</style>

<script src="autocomplete.class.js"></script>
<script src="combobox.class.js"></script>

</head>
<body>
<h1>Autocomplete Demo</h1>

<p>Simple autocomplete / typeahead widget.
Keyboard and mouse commands are as follows:
</p>

<div><h2>When focused in text input box:</h2>
<ul><li>
arrows move focus to suggestion list
</li><li>
alphanumerics and backspace display suggestion list if matches found
(count of matches is displayed if "show screen reader messages" is checked in the demo)
</li></ul>
</div><div>
<h2>When focused in suggestions list:</h2>

<ul><li>
arrows and/or mouse hover move focus among suggestions
(if in single select mode, selection follows focus, otherwise selection does not change)
</li><li>
enter and/or mouse click accepts current selection and closes list
(if in single select mode will select item, otherwise selection not modified)
</li><li>
escape cancels and refocuses input
</li></ul>
</div>

<div><label>Multiselect
<input type="checkbox" id="multiselect">
</label><label>Show screen reader messages
<input type="checkbox" id="showMessages">
</label></div>

<div class="autocomplete" id="myAutocomplete">
<div class="combobox" id="myCombobox">
<label>choose:
<input type="text">
</label>

<div role="application"><ul class="suggestions"></ul></div>
</div><!-- .combobox -->

<div class="message off-screen" aria-live="polite">
</div>
</div><!-- .autocomplete -->

<div id="message" class="message" aria-live="polite">
</div>

<script>
let message = document.querySelector ("#message");
let multiselect = document.querySelector ("#multiselect");
let showMessages = document.querySelector ("#showMessages");
let autocomplete = setupAutocomplete ();

autocomplete.container.addEventListener ("done", () => message.innerHTML = `You chose ${autocomplete.valueOf()}.`);

multiselect.addEventListener ("click", e => {
if (e.target.checked) {
autocomplete.combobox.container.classList.add("multiselect");
} else {
autocomplete.combobox.container.classList.remove("multiselect");
} // if
}); // handler

showMessages.addEventListener ("click", e => {
let message = document.querySelector(".autocomplete .message"); // screen reader message container
if (e.target.checked) {
message.classList.remove("off-screen");
} else {
message.classList.add("off-screen");
} // if
}); // handler

function setupAutocomplete () {
return new AutocompleteBehavior (document.querySelector ("#myAutocomplete"),
["chocolate", "vanilla", "strawberry", "coconut"]);
} // setupAutocomplete
</script>

</body>
</html>