blob: 41b8867616ac5e23a52d1e8d0ed59fcb57ecf0c4 (
plain)
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
|
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>In a <div> element with role="combobox" and aria-autocomplete="none", change values of the combobox by typing.</title>
<style type="text/css">
.hasFocus { border: 2px solid red; }
</style>
<script type="text/javascript">
var DEL = 8;
var BACK_SPACE = 72;
var comboInfo = {};
function initComboInfo() {
comboInfo.comboBox = document.getElementById ('test');
comboInfo.textEntry = document.getElementById ('textEntry');
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
comboInfo.options = active.parentElement.children;
return active;
}
function matchOption(/* String */ entryVal) {
var theOption = null;
// Check only if entryVal is not empty.
//
if (entryVal != null && entryVal.length != 0) {
for (var i = 0; i < comboInfo.options.length; i++) {
var anOption = comboInfo.options[i];
var optionText = anOption.innerHTML.toLowerCase();
if (optionText.indexOf (entryVal) == 0) {
theOption = anOption;
break;
}
}
}
return theOption;
}
function updateActive (/* Element */ newActive) {
var oldActive = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
if (oldActive != newActive) {
comboInfo.comboBox.setAttribute ('aria-activedescendant', newActive.getAttribute ('id'));
oldActive.removeAttribute ('class');
newActive.setAttribute ('class', 'hasFocus');
}
}
function doOnload() {
var active = initComboInfo();
active.setAttribute ('class', 'hasFocus');
comboInfo.textEntry.value = active.innerHTML;
comboInfo.textEntry.focus();
}
function handleTyping (event) {
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
/* NOTE: Supports deletion only from the end of the text INPUT value */
var stringSoFar = event.target.value;
if (event.which == DEL || event.which == BACK_SPACE)
stringSoFar = stringSoFar.slice(0, stringSoFar.length-1);
else
stringSoFar = stringSoFar + String.fromCharCode (event.which);
var matchedOption = matchOption (stringSoFar.toLowerCase());
if (matchedOption != null)
updateActive (matchedOption);
}
</script>
</head>
<body onload="doOnload();">
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="none" aria-activedescendant="o1">
<input id="textEntry" role="textbox" aria-owns="owned_listbox" onkeypress="handleTyping(event);" type="text">
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
<li role="option" id="o1">Zebra</li>
<li role="option" id="o2">Zoom</li>
<li role="option" id="o3">Zeta</li>
<li role="option" id="o4">Zaphod</li>
<li role="option" id="o5">Alpha</li>
</ul>
</div>
</body></html>
|
