Come posso aggiungere jquery ui autocomplete a un elemento creato dinamicamente?

Question

Sto cercando di ottenere il completamento automatico di jQueryUI sugli elementi di input del modulo creati dinamicamente, ma non funziona. Ho provato a usare keyup.autocomplete e keydown.autocomplete come bind events in $ .live(), ma è vincolante per i nuovi elementi - solo quelli già presenti nella pagina.

Prova il codice here (prova a digitare "ava" nel primo input, quindi fai clic su "Aggiungi un input" e digita lo stesso nel nuovo input).

JavaScript:

$(function() { 
    $("input#addButton").click(function() { 
     $("input.searchInput:last").clone(true).appendTo($(this).closest("form")); 
     $("input.searchInput:last").val(""); 

    }) 

    $("input.searchInput").live("keydown.autocomplete", function() { 
     $(this).autocomplete({ 
      source: [ 
       "ActionScript", 
       "AppleScript", 
       "Asp", 
       "BASIC", 
       "C", 
       "C++", 
       "Clojure", 
       "COBOL", 
       "ColdFusion", 
       "Erlang", 
       "Fortran", 
       "Groovy", 
       "Haskell", 
       "Java", 
       "JavaScript", 
       "Lisp", 
       "Perl", 
       "PHP", 
       "Python", 
       "Ruby", 
       "Scala", 
       "Scheme" 
       ], 

      minLength: 2 
     }); 
    }) 
}); 

HTML:

<form name="myForm" method="post"> 
    <input id="addButton" name="addButton" type="button" value="Add an input" /> 
    <input name="search" value="" class="searchInput" maxlength="20" /> 
</form> 

Answer 1

Funzione .Live() è DEPR ecated ora.

Sembra che il codice come questo funziona:

var options = { 
    source: ["ActionScript", "AppleScript"], 
    minLength: 2 
}; 
var selector = 'input.searchInput'; 
$(document).on('keydown.autocomplete', selector, function() { 
    $(this).autocomplete(options); 
}); 

Answer 2

Questo funziona:

$(function() { 
 
    var options = { 
 
    source: [ 
 
     "ActionScript", 
 
     "AppleScript", 
 
     "Asp", 
 
     "BASIC", 
 
     "C", 
 
     "C++", 
 
     "Clojure", 
 
     "COBOL", 
 
     "ColdFusion", 
 
     "Erlang", 
 
     "Fortran", 
 
     "Groovy", 
 
     "Haskell", 
 
     "Java", 
 
     "JavaScript", 
 
     "Lisp", 
 
     "Perl", 
 
     "PHP", 
 
     "Python", 
 
     "Ruby", 
 
     "Scala", 
 
     "Scheme" 
 
    ], 
 
    minLength: 2 
 
    }; 
 

 
    $("input.searchInput").live("keydown.autocomplete", function() { 
 
    $(this).autocomplete(options); 
 
    }); 
 

 
    var addInput = function() { 
 
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />"; 
 
    $(inputHTML).appendTo("form#myForm"); 
 
    $("input.searchInput:last").focus(); 
 
    }; 
 

 
    if (!$("form#myForm").find("input.searchInput").length) { 
 
    addInput(); 
 
    } 
 

 
    $("input#addButton").click(addInput); 
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
 
<form id="myForm" name="myForm" method="post"> 
 
    <input id="addButton" name="addButton" type="button" value="Add an input" /> 
 
</form>