Question

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

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

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

see jsfiddle for full code sample

提前谢谢你的帮助!! :) -Dean

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('<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
 });

Answer 3

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

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

$(wrapper).append($('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>').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')});
    });

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

Answer 5

这是对动态创建的输入字段使用自动完成功能的简单方法。

    write.table(df3, quote = FALSE, sep = "\t", file = "C:/Documents/Results/A-14.txt", row.names = FALSE)

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

5 个答案: