【发布时间】：2016-03-21 08:05:03
【问题描述】：
目前正在研究 jQuery 自动完成和克隆。在单击 add more 按钮之前的开始，原始字段工作正常，但是当我单击 add more 按钮时，克隆该行的时间自动完成不起作用.
这是我的 HTML 代码
<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>
这是我克隆的 jQuery 代码
$(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));
这是我的自动完成代码
$(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('');
}
}
}
});
}
平均文本字段 - 小数点后加零
$(".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;
}
});
当我通过 SO 进行搜索时，我在该链接中找到了一个解决方案，他们要求将自动完成功能放入一个函数中并在克隆后调用该函数，我做了同样的事情，但我仍然没有得到我想如果自动完成是正确的 uuid 概念我错了。
这里是JSFiddle
使用我当前的代码，我可以进行克隆和首次自动完成功能
提前感谢任何建议
【问题讨论】：
标签： javascript jquery html autocomplete jquery-autocomplete