CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Manny Calavera
Manny Calavera

Reputation: 6873

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.

Upvotes: 2

Views: 1071

Answers (3)

sdurette
sdurette

Reputation: 71

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

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272216

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.

Upvotes: 3

Mark Costello
Mark Costello

Reputation: 4394

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

Upvotes: 0

Related Questions