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, Commented Jul 12, 2011 at 20:54
@Dutchie432: yes, I did - jsfiddle.net/6t74T/2 - same result. — 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, 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, 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, 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

changing accepted answer since this is compatible with new versions.
– Eric Belair
Commented Aug 8, 2014 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
Commented Feb 2, 2015 at 5:12
Hello @Andrei, can you take a look at stackoverflow.com/questions/33410824/… too pls. Thanks
– Jaikrat
Commented Oct 29, 2015 at 9:50
3

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

Lifesaver! Works like a charm.
– ArabianMaiden
Commented Apr 14, 2021 at 17:34

Add a comment |

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

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 stackoverflow.com/questions/33410824/… too pls. Thanks — Jaikrat, Commented Oct 29, 2015 at 9:50
Can you look at this questions do you have any solution: stackoverflow.com/questions/38693916/… — MJ X, Commented Aug 1, 2016 at 9:40

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

313 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related