¿Cómo puedo agregar la autocompletar de jquery ui a un elemento creado dinámicamente?

Question

Estoy intentando que jQueryUI Autocompletar se active en elementos de entrada de formulario creados dinámicamente, pero no está funcionando. He intentado utilizar keyup.autocomplete y keydown.autocomplete como eventos de vinculación en $ .live(), pero es vinculante para los nuevos elementos, solo los que ya están en la página.

Pruebe el código here (intente escribir "ava" en la primera entrada, luego haga clic en "Agregar una entrada" y escriba lo mismo en la nueva entrada).

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

Función .live() es DEPR ecated ahora.

Parece que este código como funciona:

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

Answer 2

Esto funciona:

$(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>