添加字段後，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>);