9

此代码适用于除 Internet Explorer 9 之外的所有主要浏览器。我不明白我做错了什么，这可能是我遗漏的一些简单的东西。

复制此代码（或使用此 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>

我希望它最终尽可能跨浏览器。

4

3 回答 3

9

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 演示。

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

更多信息在这里： http ://caniuse.com/#search=datalist

于 2013-03-12T18:03:20.150 回答
3

由于某种原因，提供的解决方案对我不起作用。相反，我使用 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

于 2014-06-12T14:11:54.730 回答
-1

您需要向 IE8 添加一个定义内容兼容性视图的元元素，并且还需要启用 dummy-element 创建行 - 这也是必需的。

所以，你<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>
于 2012-09-12T19:47:16.050 回答