What is the </datalist> tag for?

Question

When I was using Sublime Text to edit a file html, I realized that he suggested a tag with the name of datalist.

I had never seen about this tag before, but it seems that really exists.

As I did not see any explanation in Portuguese on the subject, I decided to ask this question here:

• What’s the tag for </datalist>?
• This tag is new?
• Somehow, it can replace the "Autoadd" functionality that currently exists in several libraries/frameworks on Javascript?

Answer 1

The datalist element, new to HTML 5, shows a list of predefined elements as an option for a text input box. If the browser does not support this component, it can display the elements that make up the datalist in plain text form.

Inside the input element, the attribute list refers to the datalist element through its id and each element of a datalist is identified by the option element.

<fieldset>
<legend>Música</legend>
<label for="estilo"> Qual o seu estilo musical ?</label>
<input id="estilo" name="estilo" type="text" list="listaestilos"/>
<datalist id="listaestilos"><br/>Escolha entre estes:
<option value="samba">Samba</option>
<option value="blues">Blues</option>
<option value="jazz">Jazz</option>
<option value="mpb">MPB</option>
<option value="rock">Rock</option>
<option value="clássico">Clássico</option>
<option value="bossanova">Bossa-Nova</option>
<option value="pop">Pop</option>
</datalist>
</fieldset>

Source:Fábio Flatschart Element datalist

Note : In Opera 11 browser, this component is rendered perfectly.

The content of a datatalist element may alternatively be displayed to other browsers that do not support this feature by including a select element.

    <fieldset>
<legend>Música</legend>
<label for="estilo">Qual o seu estilo musical ? </label>
<input id="estilo" name="estilo" type="text" list="listaestilos">
<datalist id="listaestilos">
<label for="estiloalt" > Ou, selecione desta lista</label>
<select name="estiloalt" id="estiloalt">
<option value="samba">Samba</option>
<option value="blues">Blues</option>
<option value="jazz">Jazz</option>
<option value="mpb">MPB</option>
<option value="rock">Rock</option>
<option value="clássico">Clássico</option>
<option value="bossanova">Bossa-Nova</option>
<option value="pop">Pop</option>
</select>
   </datalist>
   </fieldset>

Source:Fábio Flatschart Element datalist with alternative content

In Safari the above code is seen as follows

This element has no attribute other than Global Attributes, common to all elements.

---

Comportamento Inusitado

So far (17/07/2018) here on my machine - Windows 10, Chrome Version 67.0.3396.99 and Opera 54.0.2952.54 - if the list of predefined elements is open

and scroll the browser scroll the list remains fixed on the screen.

Answer 2

What is the tag < datalist for>?

It is used to provide an "auto-fill" feature in form elements. It allows you to provide a list of predefined options to the user as they enter data.

For example, if a user starts inserting some text into a textfield, a list would be suspended with pre-populated values that they could choose.

The tag <datalist> can be used in conjunction with a <input> element containing a list attribute.

An example of an element <input> with predefined values in a <datalist>:

<form action="formulario_cor.php" method="post">
<label for="cor">Qual sua cor favorita? </label>
    <input list="cor" name="cor" >
    <datalist id="cor">
        <option value="Vermelho">
        <option value="Rosa">
        <option value="Amarelo">
        <option value="Verde">
        <option value="Azul">
        <option value="Preto">
    </datalist>
    <input type="submit" />
</form>

This tag is new?

According to the documentation from w3schools to tag <datalist> is new in HTML5.

Somehow, it can replace the functionality of "Autocomplement" that currently exist in several libraries/frameworks in Javascript?

Thanks to the Datalist tag no longer need to use jQuery or some other framework JavaScript, along with some server-side code to implement Autocomplement functionality in entries, search or fill in data in forms, which is commonly triggered when the user type a letter.

If, for example, we have had an entry where the user should include their country (as in the example above), we can add the list by element datalist, which provides users with certain filled in suggestions or limited only to the countries that are accepted for registration.

Answer 3

As many have already replied, the <datalist> other than <select> normal has a text box, or it is possible to filter the results of a combobox according to what you type. Note that this is a tag that is not yet 100% implemented or browsers still have one or the other BUG.

According to the https://caniuse.com/#search=datalist:

1. Opera and Chrome (Desktop):

   • It has partial support, but when the list is too long some with which some items cannot be selected.

2. IE11 and Msedge:

   • Has partial support, but in IE and Edge triggers text input events and change after selecting an item.

3. Firefox

   • Has partial support but does not support <datalist> with inputs other than of the type text, for example number, range and color.

4. Not supported by browsers:

   Safari for Mac OSX (at least until version 10.1 and Preview) and Safari for iOS

5. Is supported completely by the following browsers:

   Native Android 4.4.4 and Chrome 57 browser for Android

So I think it’s still something to think about the use, the link http://flatschart.com/html5/datalist.html pointed out a good example of fallback for browsers that do not support datalist at all:

<label for="estilo">Qual o seu estilo musical?</label>
<input id="estilo" name="estilo" type="text" list="listaestilos">
<datalist id="listaestilos">
    <label for="estiloalt"> Ou, selecione desta lista</label>
    <select name="estiloalt" id="estiloalt">
        <option value="samba">Samba</option>
        <option value="blues">Blues</option>
        <option value="jazz">Jazz</option>
        <option value="mpb">MPB</option>
        <option value="rock">Rock</option>
        <option value="clássico">Clássico</option>
        <option value="bossanova">Bossa-Nova</option>
        <option value="pop">Pop</option>
    </select>
</datalist>

Of course it does not solve the other bugs, so in case I think it is a good thing to avoid if you want compatibility, even if it is something good that will solve the problem and help not have dependencies yet is not something "100%"

---

Alternatives

Although not the focus of the question, it may be of interest to look for alternatives even with dependencies, one that I suggest would be the:

• http://selectize.github.io/selectize.js/ for those who use jQuery
• https://select2.github.io for Bootstrap
• https://github.com/allenhwkim/angularjs-autocomplete for those who use Angular.js
• https://github.com/angular/material for those who use Angular.js with Material (a theme for Angular.js)
• https://github.com/Pixabay/JavaScript-autoComplete for those who do not use any lib (Vanillajs)

Answer 4

The tag specifies a list of predefined options for an element .

The tag is used to provide an "auto-fill" feature on elements. Users will see a drop-down list of predefined options as they enter data.

Use the element list attribute to link it together with an element .

Example:

<input list="browsers">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>

Datalist element

The datalist element, new to HTML 5, shows a list of predefined elements as an option for a text input box. If the browser does not support this component, it can display the elements that make up the datalist in plain text form.

Within the input element, the ,list attribute references the datalist element through its id and each element of a datalist is identified by the option element.

Note : In Opera 11 browser, this component is rendered perfectly. See in the file Element datalist with alternative content the solution for browsers that do not yet support this element.

    <fieldset>
     <legend>Música</legend>
     <label for="estilo"> Qual o seu estilo musical ?</label>
     <input id="estilo" name="estilo" type="text" list="listaestilos"/>
     <datalist id="listaestilos"><br/>Escolha entre estes:
       <option value="samba">Samba</option>
       <option value="blues">Blues</option>
       <option value="jazz">Jazz</option>
       <option value="mpb">MPB</option>
       <option value="rock">Rock</option>
       <option value="clássico">Clássico</option>
       <option value="bossanova">Bossa-Nova</option>
       <option value="pop">Pop</option>
     </datalist>
    </fieldset>

_{Source: http://flatschart.com/html5/datalist.html}

Answer 5

What preceded the datalist functionality?

A highlight among the most used Javascript gadgets in the decade previous has been the gadget autocomplete content box. Each Javascript structure has its own particular autocomplete gadget and a considerable lot of them has come to be truly laudable. Much like the first experiment of the marker of position with marking, a utility used from time to time has been downloaded from a Javascript utility to HTML only through new DATALIST component.

  <datalist></datalist>

What she really is?

The HTML Element contains a set of elements that speak with the qualities accessible to different controls. The tag defines an array of predefined choices for a input component. The tag is used to provide a offer of "autocomplete" in the input components. Customers will see a drop-down arrangement of predefined choices as information for input. You can use the input component schedule to associate it to a datalist component.

Examples:

<datalist>

<option value="option value">

</datalist>

Example 2:

<!DOCTYPE html>
 
        <html>
     
    <head>
         <title>Title name will go here</title>
    </head>
     
    <body>
         
        <input list="country">
         
        <datalist id="country">
     
            <option value="India">
            <option value="Australia">
            <option value="Sourth Africa">
            <option value="Canada">
            <option value="America">
 
        </datalist>
         
        <input type="submit" value="submit"/>
         
    </body>
     
    </html>

Completion:

What is provided is a very automatic fill list rudimentary, but useful, of existing items that correspond to the text provided. Of course the lack of style that comes with the OPTION elements is not ideal, and there is no method to connect DATALIST to a point of service end for more dynamic suggestions, but this new element is a step in the right direction!

References

The quoted passages have been translated from here and from here.