What is the / datalist tag for?

28

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

I've never seen this tag before, but it does seem that really exists .

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

  • What is the </datalist> tag used for?
  • Is this tag new?
  • Somehow, can it override the "autocompletion" functionality that currently exists in various libraries / frameworks in Javascript ?
asked by Wallace Maxters 11.04.2017 в 18:39

5 answers

25

The datalist element, new 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 list attribute references 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 the Opera 11 browser, this component renders perfectly.

Thecontentofadatatalistelementcanbeviewedalternativelyforotherbrowsersthatdonotsupportthisfeaturebyincludingaselectelement.

    <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 datalist element with alternative content

In Safari the above code is viewed as follows

Thiselementhasnoattributeotherthan Global attributes , common to all elements.

Unusual Behavior

  

To this date (07/17/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

  

andscrollingthebrowserscrollthelistremainsfixedonthescreen.

    
11.04.2017 / 18:49
13
  

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.

    
11.04.2017 в 20:17
8

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 :

  • Opera and Chrome (Desktop):

    • It has partial support, but when the list is too long some of the items can not be selected.
  • IE11 and Msedge:

    • It has partial support, but in IE and Edge triggers text input events and change after an item is selected.
  • Firefox

    • Partial support, but does not support <datalist> with inputs that are not of type text , for example number , range and color .
  • Not supported by browsers:

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

  • It is fully supported by the following browsers:

    Android 4.4.4 and Chrome 57 native browser for Android

  • 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)
    11.04.2017 в 20:50
    6

    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

        
    11.04.2017 в 19:01
    3

    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 .

        
    11.04.2017 в 18:55