jQuery自动完成没有在克隆上工作

Question

Currently working on jQuery autocomplete & clone. In the beginning before clicking the add more button, the original field is working fine, but when I click the add more button that is clone the row that time auto complete not functioning.

Here is this my HTML code

<div class="cloned-row1">
    <input type="text" id="txt_schName_1" class="ipt_Field required_Field txt_schName "/>
    <input type="button" class="btn_more edubtnmore btn_right edu_add_button" />
</div>

Here is my cloned jQuery code

 $(document).on("click", ".edu_add_button", function() {
         var $clone = $('.cloned-row1:eq(0)').clone(true, true);
         var num = $('.cloned-row1').length;
         $clone.find('[id]').each(function() {
           this.id += '_' + num;
           $(this).removeClass("errRed");              
           if ($(this).hasClass("required_Field")) {
             $(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
             $(this).addClass("cloned_field");
             //$(this).addClass("errRed");
           } else {
             $(this).removeClass("errRed");
             $(this).removeClass("text-error-red");
           }
         });
         $clone.find('.btn_more').after("<input type='button' class='btn_less1 edu_btnle' id='buttonless'/>");
         $clone.attr('id', "cloned-row" + (++count));
         $clone.find(".school_Name").attr('disabled', true).val('');
         $clone.find(".txt_schName").val('').attr('id', 'txt_schName_' + count);
         $clone.find(".degree_Description").attr('disabled', true).val('');
         $clone.find(".ipt_Havg").val('');
         $clone.find(".trans_date").val('');
         $(this).parents('.educat_info').after($clone);
         autoComplete($('#txt_schName_' + count));

Here is my auto complete code

 $(document).ready(function() {
   autoComplete($('#txt_schName_1'));
});

function autoComplete(t) {
  t.tableAutocomplete({
    highlightClass: "bold",
    source: function(request, response) {
      var regex = new RegExp(request.term, 'i');
      //var filteredArray = filteredArray.slice(0,10);
      $.ajax({
        url: "json/dummy.json",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            // This code is only for testing. It should be done on the server!
            if (regex.test(item.id) || regex.test(item.label)) {
              return item
            }
          }));
        },

      });
    },
    columns: [{
        field: 'id',
        title: 'Search School Name'
    }, {
        field: 'label',
        title: 'School Name'
    }],
    delay: 500,
    select: function (event, ui) {
        if (ui.item != undefined) {
            $(this).val(ui.item.value);
            $('#school_Name').val(ui.item.label);
            console.log(ui.item.label);
            if (ui.item.label === "Other"){
                var schoolObj = $(".school_Name");
                   schoolObj.prop('disabled', false);
                   schoolObj.val('');
            }
        }
    }
});
}

Average text field - add zero after decimal point

$(".ipt_Havg").focusout(function(event) {
         var nondecimalRegex = /^\d{1,6}$/,
           inputtxt = event.target.value,
           decimalRegex = /^\d{1,6}\.\d{3}$/;
         if (inputtxt.length > 0) {
           var resultVal;
           if (/^\d{1,6}$/.test(inputtxt)) {
             resultVal = inputtxt + ".000";
           } else if (/^\d{1,6}\.\d{1,3}$/.test(inputtxt)) {
             // count of zeros to add to the end of input val
             var c = 3 - inputtxt.split("\.")[1].length;
             resultVal = inputtxt + (c == 1 ? "0" : (c == 2 ? "00" : ""));
           } else {
             alert("The field can have a maximum of 6 digits before the decimal symbol, and 3 digits after the decimal symbol");
           }
           this.value = typeof resultVal == "undefined" ? "" : resultVal;
         }
       });

When i searched through SO i found one solution that is in that link they asked to put autocomplete in a function and call the function after clone i did the same but still i am not geting i guess autocomplete was takking uuid concept correct if i am wrong.

Here is the JSFiddle

With my current code where I am able to do cloning and first time auto complete functionalities

Thanks in advance Any suggestion please

Answer 1

Here some changes:

• first avoid to use deep cloning, with autocomplete il will copy events bound to autocomplete element and it will not work; so use clone()
• the class/id on you are triggering autoComplete are wrong (eg missing selector type or wrong name), I tried to fix them
• after the first point the selection on the second autocomplete update the first row I have changed the select function to work on cloned

HTML:

  <div class="input-group">
    <input type="text" id="txt_schName" class="ipt_Field txt_schName" />
    <p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
  </div>

Js:

$(document).on("click", ".edu_add_button", function() {
  var $clone = $('.cloned-row1:eq(0)').clone();
  var num = $('.cloned-row1').length;
  $clone.find('[id]').each(function() {
    this.id += '_' + num;
    $(this).removeClass("errRed");
    if ($(this).hasClass("required_Field")) {
      $(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
      $(this).addClass("cloned_field");
      //$(this).addClass("errRed");
    } else {
      $(this).removeClass("errRed");
      $(this).removeClass("text-error-red");
    }
  });
  $clone.find('.btn_more').after("<input type='button' value='Delete' class='btn_less1 edu_btnle' id='buttonless'/>");
  $clone.attr('id', "cloned-row" + (++count));
  $clone.find(".school_Name").attr('disabled', true).val('');
  $clone.find(".txt_schName").val('').attr('id', 'txt_schName_' + count);
  $clone.find(".degree_Description").attr('disabled', true).val('');
  $clone.find(".ipt_Havg").val('');
  $clone.find(".trans_date").val('');

  var dateobj = new Date();
  var datemonth;
  if (dateobj.getMonth() + 1 < 10) datemonth = "0";
  datemonth += dateobj.getMonth() + 1;
  var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
  $clone.find("input.deg_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
      dateFormat: "mm/dd/yy",
      changeMonth: true,
      yearRange: "-100:+0",
      changeYear: true,
      maxDate: new Date(),
      showButtonPanel: false,
    });

  $('.cloned_field').addClass("errRed");
  var dateobj = new Date();
  var datemonth;
  if (dateobj.getMonth() + 1 < 10) datemonth = "0";
  datemonth += dateobj.getMonth() + 1;
  var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
  $clone.find("input.trans_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
      dateFormat: "mm/dd/yy",
      changeMonth: true,
      yearRange: "-100:+0",
      changeYear: true,
      maxDate: new Date(),
      showButtonPanel: false,
    });

  $(this).parents('.educat_info').after($clone);

  autoComplete($clone.find(".txt_schName"));
});

Autocomplete:

select: function(event, ui) {
  if (ui.item != undefined) {
    $(this).val(ui.item.value);
    $(this).closest('.row').find('.school_Name').val(ui.item.label);
    console.log(ui.item.label);
    if (ui.item.label === "Other") {
      var schoolObj = $(".school_Name");
      schoolObj.prop('disabled', false);
      schoolObj.val('');
    }
  }
}

Demo: http://jsfiddle.net/v835qe9o/