Eric Belair Eric Belair - 1 year ago 207
jQuery Question

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

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).


$(function() {
$("input#addButton").click(function() {


$("input.searchInput").live("keydown.autocomplete", function() {
source: [

minLength: 2


<form name="myForm" method="post">
<input id="addButton" name="addButton" type="button" value="Add an input" />
<input name="search" value="" class="searchInput" maxlength="20" />

Answer Source

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() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download