Awesomplete with labels

awesomplete-with-labels.markdown

Awesomplete with labels

A Pen by Andreas Borgen on CodePen.

License.

index.html

<form action="https://httpbin.org/get" target="myIframe" >
    <input name="countryCode" class="dropdown-input" value="CA" />
</form>

<!-- http://stackoverflow.com/questions/14385867/how-to-echo-on-same-html-page-after-form-submit -->
<h2>Form values</h2>
<iframe name="myIframe"></iframe>

script.babel

/*
 * Powered by
 * https://leaverou.github.io/awesomplete/
 */

function createCombo(input, items) {
    /*
        Hide the main input field, and make a second input field + dropdown button
        which will interact with the autocomplete dropdown and display the labels:
    */
    const inputDisplay = input.cloneNode(),
          dropdown = document.createElement('button');

    //Anonymize the new input so it's not included in form submissions:
    inputDisplay.removeAttribute('id');
    inputDisplay.removeAttribute('name');
    dropdown.type = 'button';  //Don't submit on click..
    input.style.display = 'none';

    //http://stackoverflow.com/a/43487948/1869660
    input.insertAdjacentElement('afterend', inputDisplay);
    inputDisplay.insertAdjacentElement('afterend', dropdown);

    const comboplete = new Awesomplete(inputDisplay, {
        //Needed so the user can start by opening the dropdown without typing anything:
        minChars: 0,
        
        list: items,
        autoFirst: true,
        sort: false,
        maxItems: 999,

        //On selection, send the value to the hidden main input field,
        //while displaying the user-friendly label:
        replace: (sugg) => {
            input.value = sugg.value;
            inputDisplay.value = sugg.label;
        }
    });
    
    /*
        Sync initial value:
    */
    if(input.value && items) {
        const entry = items.filter(x => x.value === input.value);
        if(entry.length) {
            //First, calculate the complete list, in case the user starts by opening the dropdown:
            comboplete.evaluate();
            comboplete.close();
            
            inputDisplay.value = entry[0].label;
        }
    }

    /*
        Init the dropdown button:
        https://leaverou.github.io/awesomplete/#combobox
    */
    dropdown.className = 'awesomplete-dropdown';
    dropdown.addEventListener('click', (e) => {
        var cb = comboplete;
        if (cb.ul.childNodes.length === 0) {
            cb.evaluate();
        }
        else if (cb.ul.hasAttribute('hidden')) {
            cb.open();
        }
        else {
            cb.close();
        }
    });

    return comboplete;
}


let _input,
    _comboplete;

(function() {

    function init(items) {
        _input = document.querySelector('input.dropdown-input');
        _comboplete = createCombo(_input, items);

        //For testing: Make sure the submitted form value is the country code (not the country name)
        //https://github.com/LeaVerou/awesomplete/issues/16909#issuecomment-233116848
        _comboplete.input.addEventListener('awesomplete-selectcomplete', printForm);
    }

    function printForm() {
        var form = document.querySelector('form');
        //var data = new FormData(form);
        //console.log('form value:', form.countryCode.value);

        //http://stackoverflow.com/questions/14385867/how-to-echo-on-same-html-page-after-form-submit
        form.submit();
    }


    var ajax = new XMLHttpRequest();
    ajax.open("GET", "https://restcountries.eu/rest/v1/lang/fr", true);
    ajax.onload = function() {
        var list = JSON.parse(ajax.responseText); //.map(function(i) { return i.name; });
        //console.log(list);
        init(list.map(x => ({
                                label: x.name,
                                value: x.alpha2Code,
                            })
                     )
             //.map(x => x.label)
            );
    };
    ajax.send();

})();

scripts

<script src="https://leaverou.github.io/awesomplete/awesomplete.js"></script>

style.css

.awesomplete > ul {
    max-height: 20em;
    overflow: auto;
}
.awesomplete-dropdown::before {
    content: '▼';
}

styles

<link href="https://leaverou.github.io/awesomplete/awesomplete.css" rel="stylesheet" />