JQuery Autocomplete on Ajax loaded content

I would like to use the JQuery's autocomplete plugin on a input box loaded using Ajax:

I have tried to achieve that using the following code, however it only works when the users clicks twice into the input :

$(document).ready(function() {
    $('#auto').live('keydown', function(){
        $(this).autocomplete(
          "/autocomplete",
     开发者_如何学JAVA     {
            delay:10,
            minChars:2,
            matchSubset:1,
            matchContains:1,
            cacheLength:10,
            onItemSelect:selectItem,
            onFindValue:selectItem,
            formatItem:formatItem,
            autoFill:true
        });
    });
});

Could you tell me if there is something wrong with my code?

Thanks,

The solution given in question had one issue. It executes auto-complete only after second character, because the first character can not be used for auto-complete query, thus this is the one which triggers keydown and executes registration of the control for auto-complete.

Following code attaches to all (matching) existing and newly created (Ajax) element's focus event, and performs autocomplete() registration after you click or tab into the input:

$(document).delegate(":input[data-autocomplete]", "focus", function() {
    $(this).autocomplete({
        source: $(this).attr("data-autocomplete"),
    });
})

in this example the selector find all elements having attribute "data-autocomplete", the same attribute is used as source url:

<input id="1" data-autocomplete="++URL++">

Importarnt: Depending on version you could use either live(), delegate() or on() function at the first place. Signatures of these three are slightly different, but it's quite easy to figure out how they map to each other:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

$('#auto').live('keydown', function(){

    $( "#auto" ).autocomplete({
    source: data,
    minLength: 3
    });

});

Above worked for me...

I'm not sure, but I think the live()-function in your example will bind the keydown-event so that it applies the autocomplete only after you've triggered it. Try skipping the live() and go with only the autocomplete:

$(document).ready(function() {
    $('#auto').autocomplete(
       "/autocomplete",
       {
            delay:10,
            minChars:2,
            matchSubset:1,
            matchContains:1,
            cacheLength:10,
            onItemSelect:selectItem,
            onFindValue:selectItem,
            formatItem:formatItem,
            autoFill:true
       }
    );
});