Присоедините автозаполнение JQuery к текстовому полю, которое загружается вызовом Ajax

Question

У меня есть простое веб-приложение, в котором я создал мастер, каждая страница мастера содержит разные поля формы, которые заполняются из базы данных, так как пользователь нажимает следующую, когда данные страницы извлекаются с сервера с помощью вызова Ajax.Вот код страницы, которая получена с сервера против Ajax-вызова.Я делаю это простым для понимания ..

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

И код сценария Java для присоединения автозаполнения к текстовому полю ключевых слов:

//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 Autocomplete , Как я могу прикрепить автозаполнение к текстовому полю, которое загружается с помощью вызова Ajax?

edit: Более того, я проверил мои настройки на простой странице (безAjax call) с текстовым полем и присоединением автозаполнения к этому текстовому полю таким же образом.Работает абсолютно нормально.Это подтверждает правильность настройки автозаполнения, но она не работает при подключении к текстовому полю, полученному с помощью вызова Ajax.

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

                            }
                        }))
                    }
       });

Answer 2

лучшее решение, которое я нашел

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

, как только нажата текстовая область, к нему прикрепляется автозаполнение ... кто-то ответил на это решение на мой вопрос, но удалил свой ответ ..Я только делаю небольшие изменения в его коде, и он начинает работать, поэтому я решил добавить ответ, чтобы помочь другим.Спасибо всем за ваши предложения.@Raghav, решение тоже выглядит хорошо, и я думаю, что оно тоже подойдет ... так что upvote for you @Raghav.Спасибо.

Answer 3

Это может быть то же самое обязательное действие, и в нем говорится, что решение 'Ummar' также верно.

Bind JQuery UI автозаполнения с использованием .live ()

Answer 4

После загрузки новой страницы: запустите автозаполнение вызова.Что-то вроде:

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