javascript - 输入数据列表在动态添加的元素中不起作用

Question

假设我有一个带有数据列表的列表输入，如下所示:

<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
    <select style="display: none;">
        <option value="Black" />
        <option value="Blue" />
        <option value="Dark Green" />
        <option value="Grey" />
        <option value="Green" />
        <option value="Red" />
        <option value="White" />
        <option value="Yellow" />
    </select>
</datalist>

如果像这样的列表作为我通过 AJAX 获取的更大 HTML 结构的一部分加载，则此数据列表不起作用。不显示自动完成列表。在任何其他情况下，如果这是作为默认 View 加载(因此没有任何 AJAX 请求)，则一切正常。我 100% 确定每个属性都有正确的名称。

我缺少什么？

Answer 1

数据列表元素不正确。删除“选择”。在您在评论中提供的 jsfiddle 中，您没有选择。

所以它绝对应该像这样工作:

<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
<option value="Black" />
<option value="Blue" />
<option value="Dark Green" />
<option value="Grey" />
<option value="Green" />
<option value="Red" />
<option value="White" />
<option value="Yellow" />
</datalist>