571-haswarn.html (3432B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>In a <div> element with role="combobox" and aria-autocomplete="none", change values of the combobox by typing.</title> 5 <style> 6 .hasFocus { border: 2px solid red; } 7 </style> 8 <script> 9 var DEL = 8; 10 var BACK_SPACE = 72; 11 var comboInfo = {}; 12 13 function initComboInfo() { 14 comboInfo.comboBox = document.getElementById ('test'); 15 comboInfo.textEntry = document.getElementById ('textEntry'); 16 var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant')); 17 comboInfo.options = active.parentElement.children; 18 return active; 19 } 20 21 function matchOption(/* String */ entryVal) { 22 var theOption = null; 23 24 // Check only if entryVal is not empty. 25 // 26 if (entryVal != null && entryVal.length != 0) { 27 for (var i = 0; i < comboInfo.options.length; i++) { 28 var anOption = comboInfo.options[i]; 29 var optionText = anOption.innerHTML.toLowerCase(); 30 if (optionText.indexOf (entryVal) == 0) { 31 theOption = anOption; 32 break; 33 } 34 } 35 } 36 return theOption; 37 } 38 39 function updateActive (/* Element */ newActive) { 40 var oldActive = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant')); 41 if (oldActive != newActive) { 42 comboInfo.comboBox.setAttribute ('aria-activedescendant', newActive.getAttribute ('id')); 43 oldActive.removeAttribute ('class'); 44 newActive.setAttribute ('class', 'hasFocus'); 45 } 46 } 47 48 function doOnload() { 49 var active = initComboInfo(); 50 active.setAttribute ('class', 'hasFocus'); 51 comboInfo.textEntry.value = active.innerHTML; 52 comboInfo.textEntry.focus(); 53 } 54 55 function handleTyping (event) { 56 /* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */ 57 /* NOTE: Supports deletion only from the end of the text INPUT value */ 58 var stringSoFar = event.target.value; 59 60 if (event.which == DEL || event.which == BACK_SPACE) 61 stringSoFar = stringSoFar.slice(0, stringSoFar.length-1); 62 else 63 stringSoFar = stringSoFar + String.fromCharCode (event.which); 64 65 var matchedOption = matchOption (stringSoFar.toLowerCase()); 66 if (matchedOption != null) 67 updateActive (matchedOption); 68 } 69 70 </script> 71 </head> 72 <body onload="doOnload();"> 73 <div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="none" aria-activedescendant="o1"> 74 <input id="textEntry" role="textbox" aria-owns="owned_listbox" onkeypress="handleTyping(event);" type="text"> 75 <ul role="listbox" id="owned_listbox" style="list-style-type: none;"> 76 <li role="option" id="o1">Zebra</li> 77 <li role="option" id="o2">Zoom</li> 78 <li role="option" id="o3">Zeta</li> 79 <li role="option" id="o4">Zaphod</li> 80 <li role="option" id="o5">Alpha</li> 81 </ul> 82 </div> 83 84 </body></html>