如何将jQuery ui自动完成功能添加到jQuery 1.10中动态创建的元素？

Question

This is nearly a verbatim post of this question. However, once you flip over to jQuery 1.10, the code no longer works.

I did change the call to the "live" method, and switched it over to utilize the newer "on" method. What else do I need to do to fix this http://jsfiddle.net/sacredfaith/6t74T/458/ ?

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

$(document.body).on("keydown.autocomplete", "input.searchInput",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);
});

My searches thus far have yielded methods which use deprecated jquery libraries. I'm needing a more updated version, but haven't been able to find success for the past several hours of working on this...

EDIT: Fiddle link and code updated to reflect "on" syntax changes.
EDIT2: Thanks to all for your patience.

REFERENCE: For 1.10 solution see fiddle in comments of chosen answer, otherwise using 1.9, see fiddle in chosen answer directly.

Answer 1

You didn't included jquery ui library and also use it like this for dynamic elements

$(document.body).on('focus', 'input.searchInput' ,function(){
    $(this).autocomplete(options);
});

FIDDLE

Answer 2

You can do it all in one line. Working DEMO

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

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

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

Answer 3

autocomplete creates a new widget, attached to the given element, so you only need to call it once per input, and not each time the key is pressed. So you can drop that whole block of code, and just call autocomplete in your addInput function.

I've updated your fiddle (also added jqueryUI JS and CSS)

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

Answer 4

 $(document).on('focus', "input.searchInput", function() {
    $(this).autocomplete(options);
});

http://jsfiddle.net/6t74T/459/