Can you use datalist with HTML textarea?

Question

I wanted to check if it's possible to use datalist with a textarea. I have it working with an input field, but the task I have here requires me to "add input suggestions to a one row textbox with datalist". Does that even make any sense?

<fieldset>
    <legend>
        Välj favoritbild med hjälp av datalist - skriv i listan nedan
    </legend>
    <input list="bilar" name="bil">
    <!--<TEXTAREA list="bilar" NAME="bil" ROWS="1"></TEXTAREA>  -->
    <datalist id="bilar">
        <option value="Dodge Viper">
        <option value="Honda Civic">
        <option value="Corvette Z06">
        <option value="Volvo V70">
        <option value="Ferrari Spider 360">
    </datalist>                 
</fieldset>

However, I can't get it working with my textarea (which is commented out above). It works with the input-element however.

Anyone know how I can get the above example working with a one-row textbox?

Answer 1

No, because datalist by definition associates with an input element. Moreover, selecting an item drom a datalist means replacing the entire value of the associated input element, instead of appending to it, which normally be the idea if you used predefined alternatives for a textarea element.

There is nothing illogical with the idea of a pre-made list of alternatives to use for text area input, but there is nothing for it in HTML at present (or being planned, as far as I known). It can be coded rather simply in JavaScript, though.

You can have a list of items, for example as a ul list, or even as a select element. You would then add a little JavaScript that causes the item text to be written or appended to the textarea element e.g. when an item is clicked on or a selection is made from a select list

There is normally no reason to have a single-line text input field as a textarea. It’s possible, just not useful, except perhaps in very special cases. Note that <textarea rows=1 ...> lets the user enter any number of lines, it just makes that very inconvenient.

Answer 2

The <datalist> tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome.

Note that the <datalist> tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

The <datalist> tag specifies a list of pre-defined options for an <input> element and it is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

You can use ONLY the <input> element's list attribute to bind it together with a <datalist> element, not the <textarea> element.

See here for more details.

Answer 3

You can use autocomplete for that case

 $('textarea').autocomplete({
      source: Object.values(<your list here>),
  });

It look like not good as datalist of input, but it's simple.