DONT ADD ANYTHING HERE!

  1. The datalist element contains a set of option elements that represent the permissible or recommended options available to choose from within other controls
  2. To bind the datalist element to the control
    1. Give it a unique identifier in the id attribute
    2. Add the list attribute to the input element with the same identifier as value 
    3. <input list="myid" >
<datalist id="myid" ></datalist>
  3. Only certain types of input support this behavior, and it can also vary from browser to browser
  4. datalist is not a replacement for select
    1. A datalist does not represent an input itself; it is a list of suggested values for an associated control
    2. The control can still accept any value that passes vaildation, even if it is not in this suggestion list
  5. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden
  6. Recommended values in types
    1. text
    2. search
    3. url
    4. tel
    5. email
    6. number
    are displayed in a drop-down menu when user clicks or double-clicks on the control

Example

HTML

<form id="form_one">

    <input type="hidden" name="param1" value="Your choice is ">
    <label for="ice-cream-choice">Choose a flavor:</label>
    <input list="ice-cream-flavors" id="ice-cream-choice" name="param2" />

    <datalist id="ice-cream-flavors">
        <option value="Chocolate"></option>
        <option value="Coconut"></option>
        <option value="Mint"></option>
        <option value="Strawberry"></option>
        <option value="Vanilla"></option>
    </datalist>

    <input type="submit">

</form>

<output id="user_choice"></output>

Browser

JavaScript 
async function sendData() {

    const formData = new FormData(form_one);

    try {
        const response = await fetch("https://php.tomgdow.com", {
            method: "POST",
            body: formData
        });

        let result = await response.text();
        console.log(result);
        let responseArray = result.split('&');
        document.getElementById('user_choice').value = responseArray[0] + responseArray[1];

    } catch (e) {
        console.error(e);
    }
}

document.getElementById('form_one').addEventListener('submit', function (event) {

    event.preventDefault();

    sendData();

});

Example (Range)

HTML


<label for="tick">Tip amount</label>

<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />

<output id="tip"></output>

<datalist id="tickmarks">
    <option value="0"></option>
    <option value="20"></option>
    <option value="40"></option>
    <option value="60"></option>
    <option value="80"></option>
</datalist>

Browser

JavaScript 

document.getElementById('tip').value = document.getElementById('tick').value

document.getElementById('tick').addEventListener('input', function () {
    document.getElementById('tip').value = this.value
})

References

MDN datalist
W3C: datalist element