添加字段后，jQuery UI自动完成多个实例

Question

我正在使用jQuery UI自动完成插件，并通过jQuery中的append（）动态地向表单添加新字段。问题是我想创建新添加的字段和自动填充字段，因此即使使用相同的源URL，也会有多个自动填充字段。任何帮助？

谢谢。

Answer 1

是否这样？

var blahBlah = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ]; 
$(document).ready(function() { 
    $("input#Foo").autocomplete({ 
     source: blahBlah 
    }); 
    $("input#Bar").click(function() { 
     var div = $("<div/>").text("Dynamically generated control").insertBefore("div:last"); 
     var input = $("<input/>").autocomplete({ 
      source: blahBlah 
     }).appendTo(div); 
    }); 
}); 

Demo here。

Answer 2

在append()函数之后，您将在新字段上调用autocomplete()，并为其指定与原始字段相同的源。

Answer 3

我知道这是一个较老的问题，但我遇到同样的问题，我找到了解决方案。我发现的问题是使用JQuery的克隆函数来创建新的输入。自动完成似乎不会显示或工作。在这种情况下，问题是克隆复制包括原始自动完成信息的所有内容，这些信息指向已复制的输入的自动完成。

要解决此问题，我手动创建了克隆，然后应用自动完成并开始工作。实际上它始终在工作，但它指向原始自动完成的显示。

手动创建输入我做了以下的副本：

// note origInput = the input we are copying $("#myID") 
var myClone = $("<input />") 
       .attr("name", origInput.attr("name")) 
       .attr("type", origInput.attr("type")) 
       .attr("id", mynewid) 
       .val("") 
       .autocomplete(<your values here>); 

myClone.appendTo(<parent where you want it to be>);