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>

Just out curiosity, have you tried executing the binding each time a control is created for the specific object created? Good starting point for trouble shooting... — Dutchie432, Jul 12 '11 at 20:54
@Dutchie432: yes, I did - http://jsfiddle.net/6t74T/2/ - same result. — Eric Belair, Jul 12 '11 at 20:59
@Eric: Your fiddle (jsfiddle.net/6t74T/1) works for me in Chrome. I get autocomplete on the added box as well. — Mrchief, Jul 12 '11 at 21:08
@MrChief: You're right... it works in IE8 too. Hmmm Must be an IE9 issue then.... — Eric Belair, Jul 12 '11 at 21:12
This works in IE8 only when resetting the bind after the new input is created - jsfiddle.net/6t74T/2. The jsfiddle works, but not my actual code... — Eric Belair, Jul 12 '11 at 21:16
I think this has something to do with clone() - it doesn't seem to be copying the handlers - even when specifying withDataAndEvents AND deepWithDataAndEvents. — Eric Belair, Jul 12 '11 at 21:30

score 53 · Accepted Answer · answered Aug 04 '14 at 08:11

53

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

answered Aug 04 '14 at 08:11

Andrei

882
8
13

changing accepted answer since this is compatible with new versions. – Eric Belair Aug 08 '14 at 14:12
Thank you for this! Just helped me with a nested form fields issue in Rails 3.2 trying to get autocomplete working! – butterednapkins Feb 02 '15 at 05:12
Hello @Andrei, can you take a look at http://stackoverflow.com/questions/33410824/autocomplete-in-jquery-with-dynamically-added-elements too pls. Thanks – Jaikrat Oct 29 '15 at 09:50
2

Almost worked for me, I had to change `$(this).autocomplete(options);` to `$(this).autocomplete({source : options});` though. – XiCoN JFS Dec 22 '17 at 12:18
1

Lifesaver! Works like a charm. – ArabianMaiden Apr 14 '21 at 17:34

score 11 · Answer 2 · edited Sep 25 '16 at 21:35

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>

Hello @Eric, can you take a look at http://stackoverflow.com/questions/33410824/autocomplete-in-jquery-with-dynamically-added-elements too pls. Thanks — Jaikrat, Oct 29 '15 at 09:50
Can you look at this questions do you have any solution: http://stackoverflow.com/questions/38693916/how-to-use-jquery-autocomplete-in-a-dynamic-form — MJ X, Aug 01 '16 at 09:40

score 0 · Answer 3 · answered Oct 11 '22 at 07:03

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

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

3 Answers3

Linked