0

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?

Zephree
  • 151
  • 4

2 Answers2

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);
    };
});
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
0

I don't know about an article, but as long as you call jQueryUI's autocomplete() on the new text input it should work fine. When you duplicate the row are you calling autocomplete() again?

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
  • Dave: I think I'm confused, when I duplicate the field ID has the same name. The only way I saw to call autocomplete was to reference the field ID: `$( "#tm" ).autocomplete({ source: tms });` – Zephree Sep 14 '11 at 13:01
  • Then either give it a new ID, or use a class, or reference the text input within the new row, or... But having to DOM elements with the same ID is (technically) invalid. – Dave Newton Sep 14 '11 at 13:03
  • Can you not give the element a class name then use $( ".class" ).autocomplete({ source: tms }); ? – Steve Sep 14 '11 at 13:04
  • Also I think the .live() function may help see : http://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live – Steve Sep 14 '11 at 13:05
  • Yep--although that would call it on everything with that class, including the existing ones. That might be fine; don't know if `autocomplete()` identifies existing ones and skips them, or what,. – Dave Newton Sep 14 '11 at 13:05
  • It would have to be a class for it to work, unless you want to generate more. And if you do `var currentInput = $(this)` and work with that variable (which is a jQuery object) it will allow you to use the auto complete function on that item (Something like `currentInput.autocomplete()`). Hopefully that makes sense :) – JakeJ Sep 14 '11 at 15:02