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
– Dutchie432, Commented Jul 12, 2011 at 20:54
@Dutchie432: yes, I did - jsfiddle.net/6t74T/2 - same result. — Eric Belair
– Eric Belair, Commented Jul 12, 2011 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
– Mrchief, Commented Jul 12, 2011 at 21:08
@MrChief: You're right... it works in IE8 too. Hmmm Must be an IE9 issue then.... — Eric Belair
– Eric Belair, Commented Jul 12, 2011 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
– Eric Belair, Commented Jul 12, 2011 at 21:16

Andrei · Accepted Answer · 2014-08-04 08:11:29Z

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 4, 2014 at 8:11

Andrei

8829 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Belair Over a year ago

changing accepted answer since this is compatible with new versions.

butterednapkins Over a year ago

Thank you for this! Just helped me with a nested form fields issue in Rails 3.2 trying to get autocomplete working!

Jaikrat Over a year ago

Hello @Andrei, can you take a look at stackoverflow.com/questions/33410824/… too pls. Thanks

XiCoN JFS Over a year ago

Almost worked for me, I had to change $(this).autocomplete(options); to $(this).autocomplete({source : options}); though.

ArabianMaiden Over a year ago

Lifesaver! Works like a charm.

Tunaki · Accepted Answer · 2016-09-25 21:35:46Z

11

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>

edited Sep 25, 2016 at 21:35

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered Jul 12, 2011 at 21:38

Eric Belair

10.7k13 gold badges79 silver badges122 bronze badges

2 Comments

Jaikrat Over a year ago

Hello @Eric, can you take a look at stackoverflow.com/questions/33410824/… too pls. Thanks

MJ X Over a year ago

Can you look at this questions do you have any solution: stackoverflow.com/questions/38693916/…

asimetris · Accepted Answer · 2022-10-11 07:03:57Z

1

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

answered Oct 11, 2022 at 7:03

asimetris

413 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related