Attach JQuery Autocomplete to a text field which is loaded by Ajax call

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.

some one replied with an answer of using .live(), and it worked for me... but where is that answer now? I can't find it now... — Muhammad Ummar, May 11 '11 at 15:45
best solution I have found `$("#nalertkw").live("click", function(){ $( "#nalertkw" ).autocomplete({ source: availableTags }); });` — Muhammad Ummar, May 11 '11 at 16:48

score 2 · Answer 1 · edited Apr 12 '16 at 13:12

Try hooking the event in Ajax call's :success handler, like this,

$.ajax({
                    url: "page.aspx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                                  $( "#nalertkw" ).autocomplete({
                                    source: availableTags
                              });

                            }
                        }))
                    }
       });

Muhammad Ummar · Accepted Answer · 2011-05-14T09:41:00.300

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.

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

This might be the same required action and it states that 'Ummar' solution is right as well.

Bind jQuery UI autocomplete using .live()

edited May 23 '17 at 10:28

Community

1
1

answered Feb 04 '13 at 11:08

Muhammad Omar ElShourbagy

6,718
2
32
50

score 0 · Answer 4 · answered May 11 '11 at 15:31

After the new page is loaded: run your autocomplete call. Something like:

jQuery.post('[url]', '[arguments]', function(data, status){
   jQuery("[pageframe]").html(data);
   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
        });
}, "html");

Attach JQuery Autocomplete to a text field which is loaded by Ajax call

4 Answers4

Linked