Question

So I’ve found numerous posts on stack about how to duplicate form rows. Got that working. I also found numerous posts about auto complete on a text box.

I need the two to work together. Essentially I have a repeatable section for Team Members and need to be able to complete their name. Problem is it only ever works on the first original row of the table.

Can someone please guide me to an article that discusses how to accomplish this?

Answer 1

Use the .delegate on the row/field for the autocomplete.
Anchor using a container ID or “body” if you do not have one.

NOTE: This is for the UI autocomplete not a plug-in.
I use a delegate so that it can be specified once – no need to add it to new rows such as those created from a .clone(), so that it can anchor to the unique ID of the container, and third so that you can use chaining if needed (which .live does not support well). I use the chain capability to custom format the render.

sample code:

$('#idOfRowsContainer).delegate('.classOfField', 'focusin', function() {
    $(this).autocomplete({
    delay: 1000,
// rest of my autocomplete
    })
});

Extra example with Sample code with chaining for custom render:

$('#idOfRowsContainer).delegate('.classOfField', 'focusin', function() {
    $(this).autocomplete({
            delay: 1000,
        // rest of my autocomplete
    }).data("autocomplete")._renderItem = function(ul, item) {
                return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Id + " <span class='autoCompCat'>" + item.Category + "</span> <span class='autoCompDesc'>" + item.Description + "</span></a>")
            .appendTo(ul);
    };
});