动态自动完成输入字段

Question

我使用Materialize作为我项目的前端框架。

我已将auto-complete输入字段用于此目的，我通过JSON为该自动完成输入字段提供数据。它工作正常，但现在我想添加另一个自动完成输入字段，我正在使用jquery的append方法。

我正在获取输入字段的结构，但不幸的是dropdown没有出现。当我在浏览器中检查元素时，我看到动态生成的输入字段的dropdown没有显示出来。下面是输入字段的代码。

HTML和CSS

<div class="row">
    <div class="col s4 offset-s4">
        <a class="btn grey darken-3 squared left" id="add">add</a>
    </div>
</div>
<div class="row" id="dynamic">
    <div class="col s2 offset-s2">
        <input type="text" id="autocomplete-input" class="autocomplete input-item" name="item">
    </div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
    var i = 1;
    $("#add").click(function(){
        i++;
        $('#dynamic').append('<div class="col s2"><input type="text" id="autocomplete-input" class="autocomplete input-item" name="item"></div>');
    });
});

任何帮助都将不胜感激。