How can I add jquery ui autocomplete to a dynamically created element in 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.

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, Jan 03 '14 at 16:54
@sacredfaith: You can do this all in one line, without delegation. Please see my answer below. — Alex Shilman, Jan 03 '14 at 17:43

score 5 · Accepted Answer · answered Jan 03 '14 at 17:05

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

FIDDLE

answered Jan 03 '14 at 17:05

Khawer Zeshan

9,470
6
40
63

So...there's no way to do this using jQuery 1.10? – sacredfaith Jan 03 '14 at 17:08
1

You just have to include `jquery ui` even with `jQuery 1.10`. See this [FIDDLE](http://jsfiddle.net/6t74T/457/) – Khawer Zeshan Jan 03 '14 at 17:10
I'm not too up-to-date with jQuery 1.10, but doesn't this create a new autocomplete widget each time an input is focused? – Tom Pietrosanti Jan 03 '14 at 17:20

Alex Shilman · Answer 2 · 2014-01-03T17:48:41.747

1

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);
});

edited Jan 03 '14 at 17:48

answered Jan 03 '14 at 17:14

Alex Shilman

1,547
1
11
15

This is very similar to Tom's suggestion. Thanks for the help! – sacredfaith Jan 03 '14 at 17:49
Similar yes, but faster. You dont need to query the dom for the last input, the last input is already the one that is created and appended as a result of your addInput function. ;) – Alex Shilman Jan 03 '14 at 17:52

Tom Pietrosanti · Answer 3 · 2014-01-03T17:23:37.113

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

arun15thmay · Answer 4 · 2014-01-03T17:18:16.583

0

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

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

edited Jan 03 '14 at 17:18

answered Jan 03 '14 at 17:01

arun15thmay

1,062
1
9
19

Sorry, your fiddle isn't working in my browser (Chrome Version 31) – sacredfaith Jan 03 '14 at 17:09

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

4 Answers4