<!DOCTYPE html>
<html lang="en">
<head>
    <title>ARIA Combobox Example</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=480">
    <style type="text/css">
        html, body {
            color: #000;
            background-color: #fff;
            font-size: 100%;
            font-family: sans-serif;
        }
        [hidden] {
            display: none !important;
        }
        .pc {
            /* pc is positioning context */ 
            position: relative;
            width: 30em;
            max-width: 400px;
        }
        .pc input[role="combobox"] {
            font-size: 12px;
            height: 1.5em;
            width: 100%; /* of pc */
            border: solid 1px #000;
            min-height: 1em;
            padding: 0.9em 0.5em;
            box-sizing: border-box;
        }
        .pc [role="status"] {
            position: absolute;
            top: 0.3em;
            right: 0.5em;
            font-size: 0.8em;
            color: #777;
        }
        .pc ul[role="listbox"] {
            position: absolute;
            margin: 0;
            padding: 0;
            list-style: none;
            top: 1.5em;
            left: 0;
            background-color: #fff;
            border: solid 1px #ccc;
            width: 100%; /* of pc */
            box-sizing: border-box;
        }
        .pc li[role="option"] {
            display: block;
            margin: 0;
            padding: 0.3em 0.5em;
            list-style: none;
            font-size: 12px;
            cursor: pointer;
        }
        .pc li[role="option"]:hover {
            color: #000;
            background-color: #ccc;
        }
        [aria-selected="true"] {
            color: #fff;
            background-color: #666;
        }
    </style>
    <script type="text/javascript">

    function $(id) {
        return document.getElementById(id);
    }
        
    var initComboBoxes = (function() {
        
        var field=null, status=null, list=null, options=null, selectedOption=null, hideAll=false, kRETURN=13, kESC=27, kUP=38, kDOWN=40;
        
        var submitHandler = function (e) {
            updateMenuDisplay();
            e.preventDefault();
        };    

        var keyUpHandler = function (e){
            switch(e.keyCode) {
                case kRETURN: return;
                case kESC:    handleEscape(e);  break;
                case kUP:     return;
                case kDOWN:   return;
            }
            updateMenuDisplay();
        };
        
        var keyDownHandler = function (e){
            switch(e.keyCode) {
                case kRETURN: handleReturn(e);    break; // Catch Return on keyDown, b/c keyUp fires after submit.
                case kUP:     handleUpArrow(e);   break;
                case kDOWN:   handleDownArrow(e); break;
            }
        };
        
        var handleEscape = function (e){
            e.preventDefault();
            clearField();
        };

        var handleUpArrow = function (e){
            selectPreviousOption();
            e.preventDefault();
        };

        var handleDownArrow = function (e){
            selectNextOption();
            e.preventDefault();
        };

        var handleReturn = function (e){
            insertValue();
            e.preventDefault();
        };

        var blurHandler = function (e){
            hideMenu();
        };

        var focusHandler = function (e){
            if (field.value) {
                updateMenuDisplay();
            } else {
                hideMenu();
            }
        };

        var mouseDownHandler = function (e) {
            if (e.target.tagName.toLowerCase() === "li") {
                updateSelectedOption(e.target);
                field.focus();
                insertValue();
            }
        };

        var updateMenuDisplay = function () {
            filter();
            list.hidden = hideAll ? true : false;
            field.setAttribute('aria-expanded', hideAll ? 'false': 'true');
            updateStatus();
        };

        var hideMenu = function () {
            list.hidden = true;
            field.setAttribute('aria-expanded', 'false');
            updateStatus();
        };

        var clearField = function (){
            if (field.value) field.value = '';
            else if (field.textContent) field.textContent = '';
            clearSelectedOption();
        };

        var clearSelectedOption = function (){
            if (selectedOption) {
                field.removeAttribute('aria-activedescendant');
                list.removeAttribute('data-selection');
                selectedOption.removeAttribute('aria-selected');
            }
            selectedOption = null;
            hideMenu();
        };

        var updateSelectedOption = function (el){
            if (!el) {
                return;
            }
            if (selectedOption) selectedOption.removeAttribute('aria-selected');
            selectedOption = el;
            list.setAttribute('data-selection', el.id);
            el.setAttribute('aria-selected', 'true');
            field.setAttribute('aria-activedescendant', el.id);
        };

        var selectNextOption = function () {
            var so = shownOptions();
            for (var i=0, c=so.length; i<c; i++) {
                var o = so[i];
                if (o == selectedOption) {
                    if (so[i+1]) updateSelectedOption(so[i+1]);
                    return;
                }
            }
            // otherwise, select the first option
            if (!selectedOption && so.length) {
                updateSelectedOption(so[0]);
            }
        };

        var selectPreviousOption = function () {
            var so = shownOptions();
            for (var i=so.length-1; i>0; i--) {
                var o = so[i];
                if (o == selectedOption) {
                    if (so[i-1]) updateSelectedOption(so[i-1]);
                    return;
                }
            }
            // otherwise, select the last option
            if (!selectedOption && so.length) {
                updateSelectedOption(so[so.length-1]);
            }
        };
        
        var shownOptions = function () {
            // It's possible this selector will fail on some Windows browsers. May need to make it a simple classname.
            return list.querySelectorAll('li:not([hidden])');
        };

        var updateStatus = function () {
            var itemCount = shownOptions().length;
            var statusContent = "";
            if (!list.hidden && itemCount) {
                if (itemCount === 1) {
                    statusContent = "%@ item".replace("%@", itemCount);
                } else {
                    statusContent = "%@ items".replace("%@", itemCount);
                }
            }
            status.textContent = statusContent;
        };

        var insertValue = function (){
            if (selectedOption) {
                if (field.value) {
                    field.value = selectedOption.textContent;
                } else if (field.textContent) {
                    field.textContent = selectedOption.textContent;
                }
                clearSelectedOption();
            }
        };

        var filter = function () {
            var s = field.value || field.textContent;
            s = s.toUpperCase();
            hideAll = true;
            if (s=='') return;
            for (var i=0, c=options.length; i<c; i++) {
                var o = options[i];
                var t = o.textContent.toUpperCase();
                // if typed string is not substring of state name or code (case insensitive), and is not exact match for state
                if ((t.indexOf(s)==-1 && o.id.indexOf(s)==-1) || t==s) { 
                    o.hidden = true;
                } else {
                    o.hidden = false;
                    hideAll = false;
                }
            }
            clearSelectedOption();
        };

        var initCombo = function (){
            // TODO: If time allows, update example to account for multiple comboboxes.
            form = document.querySelector('form');
            field = document.querySelector('[role="combobox"]');
            status = document.querySelector('[role="status"]');
            list = $(field.getAttribute('aria-owns'));
            options = list.getElementsByTagName('li');
            form.addEventListener('submit', submitHandler); // Search on iOS "Go" button.
            field.addEventListener('keyup', keyUpHandler);
            field.addEventListener('keydown', keyDownHandler);
            field.addEventListener('blur', blurHandler);
            field.addEventListener('focus', focusHandler);
            list.addEventListener('mousedown', mouseDownHandler);
        };

        return initCombo;
    }());

    window.addEventListener('load', function () {
        initComboBoxes();
    });
    </script>
</head>
<body>
    <p>Focus the accessible combobox, type a few letters of a US state or territory (e.g. 'New'), then arrow down on a desktop browser, or submit the form on mobile browsers. You'll get a filtered autocomplete list as well as status update listing the total number of filtered results.</p>
    <p>Some <a href="#">focusable content</a> before the combobox.</p>
    <form class="pc">
        <!-- Note that this field is labelled by itself, which in this case, is an explicit pointer to use the placeholder attribute value. -->
        <input type="text" tabindex="0" id="state" aria-labelledby="state" role="combobox" aria-autocomplete="list" aria-owns="statelist" aria-expanded="false" placeholder="US State or Territory" autocomplete="off" autocorrect="off" autocapitalize="off">
        <div role="status">
            <!-- This is the list status live region: e.g. "4 items." -->
        </div>
        <ul role="listbox" id="statelist" hidden>
            <li id="AL" role="option">Alabama</li>
            <li id="AK" role="option">Alaska</li>
            <li id="AS" role="option">American Samoa</li>
            <li id="AZ" role="option">Arizona</li>
            <li id="AR" role="option">Arkansas</li>
            <li id="CA" role="option">California</li>
            <li id="CO" role="option">Colorado</li>
            <li id="CT" role="option">Connecticut</li>
            <li id="DE" role="option">Delaware</li>
            <li id="DC" role="option">District of Columbia</li>
            <li id="FL" role="option">Florida</li>
            <li id="GA" role="option">Georgia</li>
            <li id="GU" role="option">Guam</li>
            <li id="HI" role="option">Hawaii</li>
            <li id="ID" role="option">Idaho</li>
            <li id="IL" role="option">Illinois</li>
            <li id="IN" role="option">Indiana</li>
            <li id="IA" role="option">Iowa</li>
            <li id="KS" role="option">Kansas</li>
            <li id="KY" role="option">Kentucky</li>
            <li id="LA" role="option">Louisiana</li>
            <li id="ME" role="option">Maine</li>
            <li id="MD" role="option">Maryland</li>
            <li id="MA" role="option">Massachusetts</li>
            <li id="MI" role="option">Michigan</li>
            <li id="MN" role="option">Minnesota</li>
            <li id="MS" role="option">Mississippi</li>
            <li id="MO" role="option">Missouri</li>
            <li id="MT" role="option">Montana</li>
            <li id="NE" role="option">Nebraska</li>
            <li id="NV" role="option">Nevada</li>
            <li id="NH" role="option">New Hampshire</li>
            <li id="NJ" role="option">New Jersey</li>
            <li id="NM" role="option">New Mexico</li>
            <li id="NY" role="option">New York</li>
            <li id="NC" role="option">North Carolina</li>
            <li id="ND" role="option">North Dakota</li>
            <li id="MP" role="option">Northern Marianas Islands</li>
            <li id="OH" role="option">Ohio</li>
            <li id="OK" role="option">Oklahoma</li>
            <li id="OR" role="option">Oregon</li>
            <li id="PA" role="option">Pennsylvania</li>
            <li id="PR" role="option">Puerto Rico</li>
            <li id="RI" role="option">Rhode Island</li>
            <li id="SC" role="option">South Carolina</li>
            <li id="SD" role="option">South Dakota</li>
            <li id="TN" role="option">Tennessee</li>
            <li id="TX" role="option">Texas</li>
            <li id="UT" role="option">Utah</li>
            <li id="VT" role="option">Vermont</li>
            <li id="VA" role="option">Virginia</li>
            <li id="VI" role="option">Virgin Islands</li>
            <li id="WA" role="option">Washington</li>
            <li id="WV" role="option">West Virginia</li>
            <li id="WI" role="option">Wisconsin</li>
            <li id="WY" role="option">Wyoming</li>
        </ul>
    </form>
    <p>Some <a href="#">focusable content</a> after the combobox.</p>
</body>
</html>