Javascript 自动完成不处理动态添加的文本框
我找到了通过jquery动态创建文本框的代码,也找到了通过javascript在文本框上实现自动完成的代码 但是把它们合并在一起对我来说是个问题。第一个文本框已成功实现自动完成,但通过“添加”按钮动态创建的新文本框未实现自动完成。这是我的密码Javascript 自动完成不处理动态添加的文本框,javascript,jquery,ajax,append,jquery-ui-autocomplete,Javascript,Jquery,Ajax,Append,Jquery Ui Autocomplete,我找到了通过jquery动态创建文本框的代码,也找到了通过javascript在文本框上实现自动完成的代码 但是把它们合并在一起对我来说是个问题。第一个文本框已成功实现自动完成,但通过“添加”按钮动态创建的新文本框未实现自动完成。这是我的密码 <script type="text/javascript"> $(function() { var availableTags = [ "ActionScript", "AppleScript",
<script type="text/javascript">
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(".insti_name").autocomplete({
source: availableTags,
autoFocus:true
});
});
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<br><div><input class="insti_name" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<br><br>
<div class="input_fields_wrap">
<button type="button" class="btn btn-primary btn-lg add_field_button " >
ADD INSTITUTIONS
</button><br>
<div style="margin-top:11px">
<input class="insti_name" type="text" name="mytext[]">
</div>
</div>
$(函数(){
var availableTags=[
“动作脚本”,
“AppleScript”,
“Asp”,
“基本”,
“C”,
“C++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“二郎”,
“Fortran”,
“好极了”,
“哈斯克尔”,
“爪哇”,
“JavaScript”,
“口齿不清”,
“Perl”,
“PHP”,
“Python”,
“红宝石”,
“斯卡拉”,
“方案”
];
$(“.insti_name”).autocomplete({
资料来源:availableTags,
自动对焦:正确
});
});
$(文档).ready(函数(){
var max_fields=10;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x”);//添加输入框
}
});
$(包装器)。在(“单击“,”.remove_字段)上,函数(e){//用户单击remove text
e、 preventDefault();$(this).parent('div').remove();x--;
})
});
增加机构
自动完成小部件api不支持您所关注的动态行为,但我们可以使用以下代码实现相同的功能:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
// first destroy the previously setup auto-complete
$( ".insti_name" ).autocomplete("destroy");
// append your new html element
$(wrapper).append('<br><div><input class="insti_name" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
// setup autocomplete again
// you can move this call and the one above (the one you have set earlier) in one function for better maintainability
$(".insti_name").autocomplete({
source: availableTags,
autoFocus:true
});
}
});
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x”);//添加输入框
//安装程序再次自动完成
//您可以在一个函数中移动此调用和上面的调用(前面设置的调用),以提高可维护性
$(“.insti_name”).autocomplete({
资料来源:availableTags,
自动对焦:正确
});
}
});
这是肯定的。希望有帮助 在添加新元素后,添加要绑定到类的事件处理程序。@nitin如果对您有效,请将其标记为解决方案。