Question

I have a simple web application in which I have created a wizard, each wizard page contains different form fields which are populated from database, as user presses next the page data is retrieved from server using Ajax call. Here is the code of the page which is retrieved from server against an Ajax call. I am making it simple to understand..

function printAdAlertWizardStep($step)
    {
            switch($step)
            {
                case 1: //step of wizard, first step
                    print "Welcome to alert wizard,...";
                    break;
                case 2: //second step of wizard which contains the text field to which I want to attach autocomplete list.
                ?>
<table>
        <tr>
        <td>Keywords</td>
        <td><!-- This is text field to which I want to attach autocomplete -->
        <input id="nalertkw" name="nalertkw" size="10" type="text">
        </td>
    </tr>
</table>

            <?php
            break;
            }
        }
    }

And the Java script code for attaching Autocomplete to keywords text field is

//Script will be executed when the page is ready for scripting
$(document).ready(function() {
var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#nalertkw" ).autocomplete({
            source: availableTags
        });
});

Now the problem is that the form is loaded after the user presses next and the $(document).ready() function has fired already when the #nalertkw text field doesn’t exists. So the autocomplete is not working. I am using Jquery-UI Autocomplete, How can I attach the autocomplete to a textfield which is loaded through Ajax call?

edit: Moreover I have tested my setup on a simple page (without Ajax call) with textfield and attaching the autocomplete to that text field the same way. It works absolutely fine. It confirms that autocomplete setup is correct, but it don’t works when attached to a textfield which is retrieved through Ajax call.

Answer 1

best solution I have found

$("#nalertkw").live("keydown.autocomplete", function(){ $(this).autocomplete({ 
source: availableTags 
}); 
}); 

as soon as the text filed is clicked the autocomplete is attached to it… some one replyed this solution to my question, but has deleted his answer.. I only make little changes to his code and it starts working, so I decided to add an answer to help others. Thanks to you all for your suggestions. @Raghav, solution also looks good, and I think it will work also.. so upvote for you @Raghav. Thanks.