Javascript 动态添加的输入行上的jQuery自动完成
我正在尝试动态地向表中添加/删除输入行,并希望每一行(现有的和新添加的)都具有自动完成功能。我使用jQuery实现了这一点 在线搜索之后,我意识到每次创建一行时都需要触发jQuery调用,解决方案之一是执行“点击”技巧。我花了很多时间,但仍然无法使自动完成部分正常工作(这里是jQuery新手),请您查看下面的代码并指出代码的错误: jsfiddle: 此处为HTML:Javascript 动态添加的输入行上的jQuery自动完成,javascript,jquery,autocomplete,jquery-ui-autocomplete,Javascript,Jquery,Autocomplete,Jquery Ui Autocomplete,我正在尝试动态地向表中添加/删除输入行,并希望每一行(现有的和新添加的)都具有自动完成功能。我使用jQuery实现了这一点 在线搜索之后,我意识到每次创建一行时都需要触发jQuery调用,解决方案之一是执行“点击”技巧。我花了很多时间,但仍然无法使自动完成部分正常工作(这里是jQuery新手),请您查看下面的代码并指出代码的错误: jsfiddle: 此处为HTML: <div data-toggle="fieldset" id="my-fieldset
<div data-toggle="fieldset" id="my-fieldset">
<div class="row" data-toggle="fieldset-entry">
<div class="col-lg-8"><input class="stateInput" id="state-0-name" name="state-0-name" placeholder="State, e.g. CA" required type="text" value="CO"></div>
<div class="col-lg-3"><input class="text-right" id="state-0-weight" name="state-0-weight" placeholder="e.g. 20.0" required type="text" value="90.00"></div>
<div class="col-lg-1"><button class="btn btn-danger" type="button" data-toggle="fieldset-remove-row" id="port-asset-0-remove"> DEL</button></div>
</div>
<div class="col-lg-2"><button class='btn btn-sm btn-info' type="button" data-toggle="fieldset-add-row" data-target="#my-fieldset" > ADD</button> </div>
<div><input class="btn btn-primary btn-lg" id="submit" name="submit" type="submit" value="Submit"></div>
</div>
$(function() {
var cdata = [
{ value: "AL", label: "Alabama" },
{ value: "AK", label: "Alaska" },
{ value: "AZ", label: "Arizona" },
{ value: "AR", label: "Arkansas" },
{ value: "CA", label: "California" },
{ value: "CO", label: "Colorado" },
{ value: "CT", label: "Connecticut" },
{ value: "DE", label: "Delaware" },
{ value: "FL", label: "Florida" },
{ value: "GA", label: "Georgia" },
{ value: "HI", label: "Hawaii" },
{ value: "ID", label: "Idaho" },
{ value: "IL", label: "Illinois" },
{ value: "IN", label: "Indiana" },
];
$("div[data-toggle=fieldset]").each(function() {
var $this = $(this);
//Add new entry
$this.find("button[data-toggle=fieldset-add-row]").click(function() {
var target = $($(this).data("target"))
console.log(target);
var oldrow = target.find("[data-toggle=fieldset-entry]:last");
var row = oldrow.clone(true, true);
console.log(row.find(":input")[0]);
var elem_id = row.find(":input")[0].id;
var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
row.find(":input").each(function() {
console.log(this);
var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + (elem_num) + '-');
$(this).attr('name', id).attr('id', id).val('').prop('checked',false);
});
oldrow.after(row);
}); //End add new entry
//Remove row
$this.find("button[data-toggle=fieldset-remove-row]").click(function() {
if($this.find("[data-toggle=fieldset-entry]").length > 1) {
var thisRow = $(this).closest("[data-toggle=fieldset-entry]");
thisRow.remove();
}
}); //End remove row
});
// autocomplete when typing
$('body').on('click', '.stateInput', function() {
$(this).autocomplete({
source: cdata,
minLength: 0,
delay: 0,
select : function(event, ui) {
$(event.target).val(ui.item.value);
}
});
$(this).autocomplete("search");
});
});