Jquery Autocomplete looping

I want to attach autocomplete to dynamically generated input boxes. I am able to do this with those who are generated from outside events(such as the click of a button). BUT in the required case, the input boxes are being generated on the ONSELECT event of a previous input box which has autocomplete attached to it.

In other words, initially I have an input box(with autocomeplete) on my page. When an option is selected(ONSELECT) into it, it generates another input box. PROBLEM-The generated input box should also have autocomplete attached to it, whose ONSELECT event should generate another input box, and this should go on forever.

I mainly need the logic behind this. I am ok with syntax. Just don't know how to approach the problem of looping.

I have read the other questions here which need the same thing done, but in their case, the elements are being generated externally. Would really appreciate any help. Thanks in advance.

EDIT- I am new here don't know how to post the code formatted- @ Rob --- Thanks. I liked your idea. But I didn't get why you have used .val('') in the end. Well, it's still not working. I tried other similar ways too(like appending the clones to the parent element (div#in)). the alerts are showing up on select. So that means the onselect event is being fired. Here's the code --

$.post("returncategory.php",
       {},
            function(data)
            {
                $('.cat').autocomplete({
                    source: data,
                    type:'json', 
                    minchar:开发者_如何学JAVA 1, 
                    fillin: false,
                    onSelect: function() {
                        //alert($(this).parent().get());
                        //$(this).clone(true, true).appendTo($(this).parent());
                        //$(this).clone(true, true).appendTo('#in');
                        $(this).clone(true, true).insertAfter($(this)).val();
                    }
                });


            },
            "JSON");

Edit: corrected code formatting

EDIT: I found the solution :) Thanks a lot for your input Rob !! Here's what i did -

$('.cat').live('click', function() {

                $(this).autocomplete({
                url: "returncategory.php",
                type: "json",
                minchar: 1,
                onSuggest: function() {

                },
                onSelect: function() {
                   $('#clicker').click();
                }
            });
            $(this).focus();
     });

$('#clicker').bind('click', function() {
   var newItem = $("<br><br><input class='cat' type='text'name='td_products["+1+"]'/>");
   $('#in').append(newItem);
   newItem.find('input').autocomplete({
                url: "returncategory.php",
                type: "json",
                minchar: 1,
                onSuggest: function() {

                },
                onSelect: function() {
                   $('#clicker').click();
                }
            });

});

P.S. I am very happy. And now I also know how to post formatted code here. Thanks!

I would say on select, you should grab the jQuery reference to the current input, then do $this.clone(true, true).insertAfter($this).val('')

http://api.jquery.com/clone/