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

Question

我已经阅读了几乎所有关于如何实现这一目标的文章,但我仍然悲惨地失败了.主要是因为我是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

实际上，我发现一种更可靠的方法是使用“on”与“focus”操作绑定，以根据字段类初始化自动完成并在退出时销毁它。这样它就会清理垃圾，并且仅在您需要时才将其初始化。

我将它与克隆行一起使用，甚至进行深度克隆，这将克隆行的加号和减号按钮，但它不会克隆自动完成功能。

var auto_opts = {...opts...}

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

这也意味着您不会被迫使用最后一行，因为当您专注于它时它会在现场起作用