CODEWITHSUNDEEP
xmlhtmlhtml-datalist
Bjørn Kjos-Hanssen
Bjørn Kjos-Hanssen

Reputation: 792

Does any browser implement the datalist data attribute?

The HTML5 element <datalist> has an attribute data="filename.xml" where filename.xml should look like this:

<?xml version="1.0"?>
<select xmlns="http://www.w3.org/1999/xhtml">
  <option value="someValue" />
  <option value="anotherValue" />
</select>

However, this seems to have not yet been implemented (tried Chrome, Safari, Firefox, Opera). Does any browser implement it? (Will any soon?)

Edit: source

Upvotes: 1

Views: 309

Answers (2)

jeffjenx
jeffjenx

Reputation: 17467

I saw the same article and was surprised to read that the data attribute isn't a part of the official spec, but I guess that is to be expected when relying on information from blog posts.

Anyways, I liked that implementation and decided to write a JavaScript function to make it work.

window.addEventListener( 'load', function( ) {
    var dataList = document.getElementById( 'myDataList' );
    getDataList( dataList, dataList.getAttribute( 'data' ) );
} );

function getDataList( dataList, dataFile )
{
    var http = new XMLHttpRequest( );
    var options, parser, xml;

    http.onreadystatechange = function( )
    {
        if( http.readyState == 4 && http.status == 200 )
        {
            if( window.DOMParser )
            {
                parser = new DOMParser( );
                xml = parser.parseFromString( http.responseText, "text/xml" );
            }
            else
            {
                xml = new ActiveXObject( "Microsoft.XMLDOM" );
                xml.async = false;
                xml.loadXML( http.responseText ); 
            }

            options = xml.getElementsByTagName( 'option' );

            for( var i = 0; i < options.length; i++ )
            {
                var option = document.createElement( 'option' );
                option.value = options[i].value;
                dataList.appendChild( option );
            }
        }
    }

    http.open( "GET", dataFile, true );
    http.send( );
}

Upvotes: 2

Andy G
Andy G

Reputation: 19367

You can check support for datalist here:

http://caniuse.com/#search=datalist

Someone else might provide information about the data attribute specifically.

There is a polyfill here, which also mentions browser support (or lack of).

Upvotes: 2

Related Questions