How can I add jquery ui autocomplete to a dynamically created element?

Question

I'm trying to get jQueryUI AutoComplete to trigger on dynamically created form input elements, but it's not working. I've tried using keyup.autocomplete and keydown.autocomplete as bind events in $.live(), but it's binding to the new elements - only those already on the page.

Try out the code here (try typing "ava" in the first input, then click "Add an Input" and type the same in the new 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

Function.live() is deprecated now.

Looks like code like this works:

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

Answer 2

This works:

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

Answer 3

In case somebody still need, this code will trigger autocomplete when new created input get focus:

$('body').on('focus', 'input[name^=\'[new_element]\']', function () {
    $(this).autocomplete({
        source: ["ActionScript", "AppleScript"],
        minLength: 2
    });
});