javascript 在动态创建的输入字段上启用 jQuery 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26498602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enabling jQuery Autocomplete on dynamically created input fields
提问by aktive
I've read almost every article i could find on how to accomplish this, but i'm still failing miserably. mostly because i'm an amateur at jQuery/Javascript.
我已经阅读了几乎所有我能找到的关于如何实现这一目标的文章，但我仍然失败得很惨。主要是因为我是 jQuery/Javascript 的业余爱好者。
I have a website that contains one input element. I've managed to get jQuery Autocomplete working nicely on this. The problem is that when i dynamically add additional elements using the .append method, these new elements do not work with autocomplete.
我有一个包含一个输入元素的网站。我已经设法让 jQuery Autocomplete 在这方面很好地工作。问题是，当我使用 .append 方法动态添加其他元素时，这些新元素无法使用自动完成功能。
See jsfiddle: http://jsfiddle.net/aktive/r08m8vvy/
参见 jsfiddle：http: //jsfiddle.net/aktive/r08m8vvy/
see jsfiddle for full code sample
Thankyou in advance for your help!! :) -Dean
预先感谢您的帮助！！:) - 院长
回答by dfionov
You must bind autocomplete after adding new elements
添加新元素后必须绑定自动完成
$(wrapper).find('input[type=text]:last').autocomplete({
source: availableAttributes
});
See example: http://jsfiddle.net/r08m8vvy/4/
回答by artm
See http://jsfiddle.net/r08m8vvy/2/
见http://jsfiddle.net/r08m8vvy/2/
Give the new input an ID and call autocomplete on it. The initial autocompate call you make won't include the dynamically added inputs.
为新输入提供一个 ID 并对其调用自动完成。您进行的初始自动匹配调用将不包括动态添加的输入。
$(wrapper).append('<div><input id="' + x + '" type="text" name="mytext"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
$( "input[id="+ x +"]" ).autocomplete({
source: availableAttributes
});
回答by Koti Panga
I Updated the fiddle http://jsfiddle.net/r08m8vvy/5/
我更新了小提琴http://jsfiddle.net/r08m8vvy/5/
You have to bind the autocomplete for new element
您必须为新元素绑定自动完成功能
$(wrapper).append($('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>').find(":text").autocomplete({
source: availableAttributes
}));
回答by crazeyez
I actually found that a more reliable way was to bind using 'on' with the 'focus' action to init the auto complete based on the field class and destory it on exit. This way it cleans up the garbage and only inits it once you need to.
我实际上发现一种更可靠的方法是使用“on”和“focus”动作进行绑定，以根据字段类初始化自动完成并在退出时销毁它。这样它就会清理垃圾，并且只在你需要的时候初始化它。
I was using it with cloning rows though and even doing deep cloning, which would clone the plus and minus buttons for the rows, it wasn't cloning the autocomplete.
我将它与克隆行一起使用，甚至进行深度克隆，这将克隆行的加号和减号按钮，它不是克隆自动完成。
var auto_opts = {...opts...}
$('body').on('focus', '.search_field', function(){
$(this).autocomplete(auto_opts).on('blur', function(){$(this).autocomplete('destroy')});
});
It also means that you aren't forced into using the last row because it works on the field as you focus on it
这也意味着您不会被迫使用最后一行，因为它在您专注于该领域时适用
