输入数据表不在动态添加的元素中工作

Question

Let's say i have list input with datalist like this:

<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>

If list like this is loaded as a part of bigger HTML structure that i get via AJAX, this datalist does not work. No autocomplete list is shown. In any other cases, if this is load as default view (so without any AJAX request) everything is working fine. I'm 100% sure that every attribute has correct name.

What I'm missing?

Answer 1

The datalist element is not correct. Remove the 'select'. In the jsfiddle you provided in your comment, you do not have the select.

So it should definitely work like that:

<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>