What is the / datalist tag for?

  

What is the < \ datalist > tag used for?

Used to provide a "autocomplete" 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-filled values that they could choose.

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

An example of a <input> element with default 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>

  

Is this tag new?

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

  

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

Thanks to the Datalist tag, it will no longer be necessary to use jQuery or some other JavaScript framework, along with some server-side code to implement the autocompletion functionality in the inputs, to look for or to fill data in forms, which commonly he is triggered when the user types a letter.

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

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

As per link :

So I think it's still something to think about using, the link link pointed to a good example of fallback for browsers which do not support the 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's a good thing to avoid if you want compatibility, even though it's something good that will solve the problem and help you not have dependencies yet it's not something "100% p>

Alternatives

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

• link for anyone using jQuery
• link for Bootstrap
• link for anyone using Angular.js
• link for anyone using Angular.js with Material (a theme for Angular.js)
• link for those who do not use any lib (VanillaJS)

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

The tag is used to provide an "autocomplete" feature in elements. Users will see a drop-down list of pre-defined 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 new datalist element in 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 as plain text.

Within 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.

Note: In the Opera 11 browser, this component is perfectly rendered. See the datalist Element file with alternative content 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: link

What preceded the datalist functionality?

  

A highlight among the most used Javascript gadgets in the decade   Previous has been the autocomplete gadget content box. Each   Javascript framework has its own particular autocomplete gadget   and a considerable number of them have become truly   commendable. Much like the first experience of   position with the marking, a utility used every now and   transferred from an HTML-only Javascript utility through the   new DATALIST component.

  <datalist></datalist>

What is it really?

  

The HTML element contains a set of elements   who speak with qualities accessible to different controls. THE   tag defines an arrangement of predefined choices for a   input component. The tag is used to provide a   "autocomplete" in the input components. Customers Summer   a drop-down arrangement of predefined choices as   input. You can use the timeline of the input component to   associate it with 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>

Conclusion:

  

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

References

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