Question

HTML5元素<datalist>有一个属性data="filename.xml"，其中filename.xml应如下所示：

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

然而，这似乎尚未实施（尝试过Chrome，Safari，Firefox，Opera）。有没有浏览器实现它？（会很快吗？）

修改：source

Answer 1

您可以在此处查看对datalist的支持：

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

其他人可能会专门提供有关数据属性的信息。

这里有一个polyfill，它也提到浏览器支持（或缺少）。

Answer 2

我看到了同样的文章，并且惊讶地发现data属性不是官方规范的一部分，但我想在依赖博客文章的信息时可以预料到。

无论如何，我喜欢这个实现，并决定编写一个JavaScript函数来使其工作。

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( );
}

是否有任何浏览器实现datalist数据属性？

2 个答案: