none
Internet Explorer, input, datalist, values with space dash space

    Question

  • Hi,

    excuse me my english please, I am only old woman ...

    I have problem with datalist, where values contain space dash scape ( " - "). When I select value from datalist, value is changed, string " - " is replaced with "-". Ok, I can solve this, but when I paste exact value (for example "Active Energy - Coconut"), datalist does not recognize conformity.

    Is there some way, how to use datalist in IE with the same functionality like in other browsers?

    <input type="text" name="product" list="products">

    <datalist id="products">

    <option valid="1">Active - Pfeffermuss 35g</option>

    <option valid="2">Active Energy - Coconut 35g</option>

    <option valid="3">Active Energy - Coconut 70g</option>

    </datalist>


    Wednesday, January 31, 2018 3:28 PM

All replies

  • Hi,

    sorry no.... IE11 does not display the valid or value attributes in the datalist dropdown on an input element. To work the same in all browsers, your datalist option elements value attribute must be the same as the options' innerText. If you leave the value attribute from your datalist options the innerText of the selected option is used for the value of the input element.

    Use the select element to prompt for ID/Description pairs.

    eg. <select id="cboProducts">

    <option value="-1" selected>none</option>

    <option value="0">sweet</option>

    <option value="1">sour</option>

    <option value="2">spicy</option>

    </select>

    You use datalist elements to provide suggestions for the values of input elements. That is where the user can select an item from a dropdown list or type in their own value...say an input field for color may offer a list of the primary colors, but users can enter whichever color they can type.

    the following will work as expected in all browsers.(viz... the value of the input element is taken from the innertext of the datalist items.

    <datalist id="products">

    <option>Active - Pfeffermuss</option>

    <option>Active Energy - Coconut 35g</option>

    </datalist>


    Rob^_^

    Thursday, February 01, 2018 4:12 AM