jquery autocomplete with cloning not working

Question

I am trying to clone inputs getting values from a json array. My problem is that when cloning, giving the new cloned inputs new id's, I am unable to get the new clones inputs to work.

here is the autocomplete function I am using.

$(function() {
  $( "#cars_1" ).autocomplete({
    source: [ { label: "auto1", Weight: "3400kg" , Width: "1M" , Height: "4M" }, { label: "car 2", Weight: "3000kg" , Width: "2M" , Height: "14M" }, { label: "motorcycle 12", Weight: "70kg" , Width: "5M" , Height: "3M" }],
     minLength: 0,
    select: function( event, ui ) {
            event.preventDefault();
            $().val(ui.item.label);

            this.value = ui.item.label;
            $('#weight_1').val(ui.item.Weight),

           this.value = ui.item.label;
            $('#width_1').val(ui.item.Width),

           this.value = ui.item.label;
            $('#height_1').val(ui.item.Height);

    }
  });
}
);

all works fine of course when getting values for the first inputs. Just unable to get a work around to get it to assign to the new cloned inputs. kind of complicated to explain so here is a Jsfiddle example

http://jsfiddle.net/adrienboufflet/yvmqfmdd/

help on this one would be great because it has been hours of struggle with no results. I know where the problem is coming from, just unable to find a work around this one.

Cheers

Answer 1

You need to initialize the plugin for the new element also like

// autocomplete function

$(function () {
    function autocomplete($els) {
        $els.autocomplete({
            source: [{
                label: "auto1",
                Weight: "3400kg",
                Width: "1M",
                Height: "4M"
            }, {
                label: "car 2",
                Weight: "3000kg",
                Width: "2M",
                Height: "14M"
            }, {
                label: "motorcycle 12",
                Weight: "70kg",
                Width: "5M",
                Height: "3M"
            }],
            minLength: 0,
            select: function (event, ui) {
                event.preventDefault();
                $().val(ui.item.label);

                this.value = ui.item.label;
                var $tr = $(this).closest('tr');
                $tr.find('.weight').val(ui.item.Weight),

                this.value = ui.item.label;
                $tr.find('.width').val(ui.item.Width),

                this.value = ui.item.label;
                $tr.find('.height').val(ui.item.Height);

            }
        });
    }

    autocomplete($("#cars_1"))

    $('#btnAdd').click(function () {

        var num = $('.datatable_class').length;
        var newNum = num + 1;
        var newElem = $('#input1').clone().attr('id', 'input' + newNum).removeClass('clonedInput').addClass('ShowClones');

        newElem.find('.cars').attr('id', 'cars_' + newNum);
        newElem.find('.weight').attr('id', 'weight_' + newNum);
        newElem.find('.width').attr('id', 'width_' + newNum);
        newElem.find('.height').attr('id', 'height_' + newNum);

        $('#input' + num).after(newElem);
        autocomplete($("#cars_" + newNum))


        if (newNum == 300)

        $('#btnAdd').attr('disabled', 'disabled');
    });
});

Demo: Fiddle

Answer 2

You need to generalize your select function, like for example:

  function autoFunc( event, ui ) {
        event.preventDefault();
        var row = $(event.target).parents('tr').first();

        this.value = ui.item.label;
        row.find('#td02 input').val(ui.item.Weight),

       this.value = ui.item.label;
        row.find('#td03 input').val(ui.item.Width),

       this.value = ui.item.label;
       row.find('#td04 input').val(ui.item.Height);
  }

Then apply that function to new elements, eg

            newElem.find('#td01 input')
                .attr('id', 'cars_' + newNum)
                .autocomplete({
                     source: autoSrc,
                     minLength: 0,
                     select: autoFunc
                     });;

See this Fiddle.