jQuery UI autocomplete multiple instances after the field was added

I am using jQuery UI autocomplete plugin and I am adding new fields to the form dynamically by append() in jQuery. The problem is that i would like to make the newly added field and autocomplete field, so there would be more than 1 autocomplete field, even开发者_运维问答 with same source URL. Any help ?

Thanks.

Like this?

var blahBlah = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: blahBlah
    });
    $("input#Bar").click(function() {
        var div = $("<div/>").text("Dynamically generated control").insertBefore("div:last");
        var input = $("<input/>").autocomplete({
            source: blahBlah
        }).appendTo(div);
    });
});

Demo here.

After the append() function, you would call autocomplete() on the new field, and give it the same source as the original field.

I know this is an older question, but I ran across the same issue and I found a solution. The issue I found was with using JQuery's clone function to create the new input. The autocomplete will not seem to display or work. The issue in this case is that the clone copies everything including the original autocomplete information that points to the autocomplete of the input that was copied.

To resolve this I manually created the clone, then applied the autocomplete and it started working. In actuality it was always working but it was pointing to the display of the original autocomplete.

To manually create the copy of the input I did the following:

// note origInput = the input we are copying $("#myID")
var myClone = $("<input />")
                .attr("name", origInput.attr("name"))
                .attr("type", origInput.attr("type"))
                .attr("id", mynewid)
                .val("")
                .autocomplete( <your values here> );

myClone.appendTo(<parent where you want it to be>);