Question

我使用自动完成多个字段使用添加更多，由于某种原因它无法正常工作。

它适用于第一个字段，但不适用于其他字段。

这是我的fiddle。

JS：

$(function()
{
    $('.add_more').click(function() {

        alert("ok");
        var str="";

        str +=' <div><input id=\"cities\" type=\"text\" \/><\/div>';

        $('#container').append(str);    

    });
});


$(function() {
    var states = ['Alabama', ' Alaska', ' Arizona', ' Arkansas', ' California', ' Colorado', ' Connecticut', ' Delaware', ' District Of Columbia', ' Florida', ' Georgia', ' Hawaii', ' Idaho', ' Illinois', ' Indiana', ' Iowa', ' Kansas', ' Kentucky', ' Louisiana', ' Maine', ' Maryland', ' Massachusetts', ' Michigan', ' Minnesota', ' Mississippi', ' Missouri', ' Montana', ' Nebraska', ' Nevada', ' New Hampshire', ' New Jersey', ' New Mexico', ' New York', ' North Carolina', ' North Dakota', ' Ohio', ' Oklahoma', ' Oregon', ' PALAU', ' Pennsylvania', ' PUERTO RICO', ' Rhode Island', ' South Carolina', ' South Dakota', ' Tennessee', ' Texas', ' Utah', ' Vermont', ' Virginia', ' Washington', ' West Virginia', ' Wisconsin', ' Wyoming'];
    $( "#cities" ).autocomplete({
        source: states
    });
});

HTML：

<a href="javascript:void(0);" class="add_more"> Add more</a>

<div id="container">
    <div><input id="cities" type="text" /><div>
</div>

CSS：

#container {
    float:left;
}

Answer 1

您需要为每个输入使用唯一的id值，以便您希望添加自动填充功能。此外，每次附加input元素时，您都需要初始化自动完成。 Here's your updated fiddle

var count = 1, states = [/* states array*/];
$(function () {
    $('.add_more').click(function () {

        alert("ok");
        var str = "";

        str += ' <div><input id=\"cities' + (++count) + '\" type=\"text\" \/><\/div>';

        $('#container').append(str);
        console.log("#cities " + count);
        $("#cities" + count).autocomplete({
            source: states
        });

    });
});





$(function () {
    $("#cities ").autocomplete({
        source: states
    });
});

自动填充添加更多附加功能无效

1 个答案: