在动态创建的输入字段上启用jQuery自动完成

我已经阅读了几乎所有关于如何实现这一目标的文章，但我仍然悲惨地失败了。 主要是因为我是jQuery / Javascript的业余爱好者。

我有一个包含一个输入元素的网站。 我已经设法让jQuery Autocomplete在这方面做得很好。 问题是当我使用.append方法动态添加其他元素时，这些新元素不适用于自动完成。

见jsfiddle： http ： //jsfiddle.net/aktive/r08m8vvy/

see jsfiddle for full code sample 

预先感谢您的帮助！！ 🙂 – 迪恩

Answer 1

添加新元素后，必须绑定自动完成

 $(wrapper).find('input[type=text]:last').autocomplete({ source: availableAttributes }); 

参见示例： http ： //jsfiddle.net/r08m8vvy/4/

Answer 2

见http://jsfiddle.net/r08m8vvy/2/

为新输入提供ID并在其上调用自动填充。 您进行的初始自动编译调用将不包括动态添加的输入。

  $(wrapper).append('
Remove
'); //add input box $( "input[id="+ x +"]" ).autocomplete({ source: availableAttributes }); 

Answer 3

我更新了小提琴http://jsfiddle.net/r08m8vvy/5/

您必须绑定新元素的自动完成

 $(wrapper).append($('
Remove
').find(":text").autocomplete({ source: availableAttributes })); 

Answer 4

我实际上发现一种更可靠的方法是使用’on’与’focus’动作绑定，以基于字段类初始化自动完成并在退出时使其失效。 通过这种方式，它可以清理垃圾，只在需要时才进行清理。

我正在使用它克隆行，甚至进行深度克隆，这将克隆行的加号和减号按钮，它没有克隆自动完成。

 var auto_opts = {...opts...} $('body').on('focus', '.search_field', function(){ $(this).autocomplete(auto_opts).on('blur', function(){$(this).autocomplete('destroy')}); }); 

这也意味着你不会被迫使用最后一行，因为当你专注于它时它可以在字段上工作