Geek asks and answers

Attach jQuery Autocomplete to a text field loaded by an Ajax call

I have a simple web application in which I created a wizard, each page of the wizard contains different form fields that are populated from the database, as the user clicks the following page data, is retrieved from the server using an Ajax call. Here is the page code that is retrieved from the server by an Ajax call. I make it easy 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 to attach the Autocomplete to keywords text field

//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
        });
});

, , , $(document).ready() , #nalertkw . , . Jquery-UI, , Ajax?

edit: , ( Ajax) . . , , , Ajax.

+3
4

,

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

, ... - , . , , , . . @Raghav, , , . @Raghav. .

+1

Ajax-: , ,

$.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
                              });

                            }
                        }))
                    }
       });
+2

. - :

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");
0

More articles:


All Articles