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 / ?

$(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.autoplete", "input.searchInput",function(){
    $(this).autoplete(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 ments of chosen answer, otherwise using 1.9, see fiddle in chosen answer directly.

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/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.autoplete", "input.searchInput",function(){
    $(this).autoplete(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 ments of chosen answer, otherwise using 1.9, see fiddle in chosen answer directly.

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited May 23, 2017 at 11:49 CommunityBot 111 silver badge asked Jan 3, 2014 at 16:49 sacredfaithsacredfaith 87011 gold badge88 silver badges2323 bronze badges 2

• 3 you are not using delegation here, syntax is slightly different, check doc e.g equivalent to live() is: $(document).on("focus","input.searchInput", function() {...}); – A. Wolff Commented Jan 3, 2014 at 16:54
• @sacredfaith: You can do this all in one line, without delegation. Please see my answer below. – Alex Shilman Commented Jan 3, 2014 at 17:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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

FIDDLE

autoplete 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 autoplete 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").autoplete(options).focus();
};

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().autoplete(options).focus();
  };

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

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

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

http://jsfiddle/6t74T/459/