Question

此代码适用于除Internet Explorer 9之外的所有主流浏览器。我不明白我做错了什么，这可能是我想念的简单。

复制此代码（或use this jsFiddle）以查看IE9中的问题：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Datalist fetching in IE9</title>
        <script type="text/javascript">
        //document.createElement('datalist');//this seems to fix it for IE6, but not for IE9
        window.onload = function() {
            alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
        };
        </script>
    </head>
    <body>
    <form method="post">
    <input name="language" type="text" value="English" list="languages" />
    <datalist id="languages">
        <option value="Arabic" />
        <option value="Bengali" />
        <option value="Bulgarian" />
        <option value="Catalan" />
        <option value="Chinese" />
        <option value="Croatian" />
        <option value="Czech" />
        <option value="Danish" />
        <option value="Dutch" />
        <option value="English" />
        <option value="Filipino" />
        <option value="Finnish" />
        <option value="French" />
        <option value="German" />
        <option value="Greek" />
        <option value="Gujarati" />
        <option value="Hebrew" />
        <option value="Hindi" />
        <option value="Hungarian" />
        <option value="Indonesian" />
        <option value="Italian" />
        <option value="Japanese" />
        <option value="Kannada" />
        <option value="Korean" />
        <option value="Latvian" />
        <option value="Lithuanian" />
        <option value="Malay" />
        <option value="Malayalam" />
        <option value="Marathi" />
        <option value="Norwegian" />
        <option value="Oriya" />
        <option value="Persian" />
        <option value="Polish" />
        <option value="Portuguese" />
        <option value="Romanian" />
        <option value="Russian" />
        <option value="Serbian" />
        <option value="Slovak" />
        <option value="Slovenian" />
        <option value="Spanish" />
        <option value="Swedish" />
        <option value="Tamil" />
    </datalist>
    </form>
    </body>
</html>

我希望它最终成为跨浏览器。

Answer 1

IE 9忽略option元素不是select元素的直接子元素（或一个optgroup元素）。一个简单的解决方法是使用条件注释将option元素包装在隐藏的select元素中：

<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
    <option value="Arabic">
    ...
<!--[if IE 9]></select><![endif]-->
</datalist>

这是此方法的jsFiddle demo。

2017年更新：值得注意的是，截至2017年7月，iOS和iOS上的Safari Mac仍然没有添加对<datalist>元素的支持。 OP要求提供适用于所有主流浏览器的解决方案，因此这可能不是解决此问题的最佳解决方案。

此处有更多信息： http://caniuse.com/#search=datalist

Answer 2

由于某些原因，提供的解决方案对我不起作用。相反，我使用jQuery UI的自动完成方法和Modernizr来验证浏览器是否支持它。

我最终使用了这个javascript代码：

 var datalist, listAttribute, options = [];

if(!Modernizr.input.list)
{
    $('input[type="text"][list]').each(function() {
        listAttribute = $(this).attr('list');
        datalist = $('#' + listAttribute);
        if (datalist.length > 0) {
            options = [];
            datalist.find('option').each(function() {
                options.push({ label: this.innerHTML, value: this.value });
            });
            $(this).autocomplete({
                source: options
            });
        }
    });
    $('datalist').remove();
}

对于以下HTML：

<div id="LocationSearch" class="col-xs-4 col-md-3">
    <input type="text" name="locations" list="locations">
    <datalist id="locations">
        <select name="locations">
            <option value="CD455">CD455</option>
            <option value="CD455">CD455</option>
            <option value="CD455">CD455</option>               
        </select>
    </datalist>
</div>

使用以下Microsoft帖子作为参考：http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

Answer 3

您需要将定义内容兼容性视图的元素添加到IE8，并且还要启用虚拟元素创建行 - 它也是必需的。

所以，你的<head>现在应该是这样的：

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- IMPORTANT -->
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
    document.createElement('datalist');          // IMPORTANT AS WELL
    window.onload = function() {
        alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
    };
</script>

使用JavaScript在IE9中获取datalist选项

3 个答案: