add autocomplete facility for dynamically added input tag

Question

I am creating autocomplete functionality on an input tag using following code.

$('.query').autocomplete({
    serviceUrl:'http://localhost/main/finder.php',
    minChars:2,
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:400,
    zIndex: 9999,
    deferRequestBy: 0, //miliseconds
    onSelect: function(value, data){
    }
    });

Now the problem is my input element is added dynamically so for first input tag autocomplete is working but when i add one more input tag then it fails for the second one.

so i need some facility that live() provide in jquery ...

please do post the solution

Answer 1

You're looking for the livequery plugin:

$('.query').livequery(function() {
    $(this).autocomplete({
        serviceUrl:'http://localhost/main/finder.php',
        minChars:2,
        delimiter: /(,|;)\s*/, // regex or character
        maxHeight:400,
        width:400,
        zIndex: 9999,
        deferRequestBy: 0, //miliseconds
        onSelect: function(value, data){
        }
    });
});

This will run the function whenever new elements matching the selector are added.

Answer 2

This should help --> http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically-generated-textboxes