将 JQuery 自动完成附加到由 Ajax 调用加载的文本字段答案

【问题标题】：Attach JQuery Autocomplete to a text field which is loaded by Ajax call将 JQuery 自动完成附加到由 Ajax 调用加载的文本字段
【发布时间】：2011-08-23 10:11:17
【问题描述】：

我有一个简单的 Web 应用程序，我在其中创建了一个向导，每个向导页面都包含从数据库填充的不同表单字段，当用户按下下一步时，页面数据是使用 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
        });
});

现在的问题是表单在用户按下下一步后加载，当#nalertkw 文本字段不存在时，$(document).ready() 函数已经触发。所以自动完成功能不起作用。我正在使用Jquery-UI Autocomplete，如何将自动完成附加到通过 Ajax 调用加载的文本字段？

edit：此外，我已经在一个带有文本字段的简单页面（没有 Ajax 调用）上测试了我的设置，并以相同的方式将自动完成附加到该文本字段。它工作得很好。它确认自动完成设置是正确的，但是当附加到通过 Ajax 调用检索的文本字段时它不起作用。

【问题讨论】：

有人回答说使用 .live()，它对我有用……但现在答案在哪里？现在找不到了……
我找到的最佳解决方案$("#nalertkw").live("click", function(){ $( "#nalertkw" ).autocomplete({ source: availableTags }); });

标签： php jquery ajax autocomplete

【解决方案1】：

加载新页面后：运行自动完成调用。比如：

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

【讨论】：

【解决方案2】：

尝试在 Ajax 调用的 :success 处理程序中挂钩事件，像这样，

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

                            }
                        }))
                    }
       });

【讨论】：

【解决方案3】：

我找到的最佳解决方案

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

一旦点击文本文件，自动完成功能就会附加到它上面……有人对我的问题回复了这个解决方案，但已经删除了他的答案。我只对他的代码做了一点改动，它就开始工作了，所以我决定添加一个答案来帮助别人。感谢大家的建议。 @Raghav，解决方案看起来也不错，我认为它也会起作用..所以为你投票@Raghav。谢谢。

【讨论】：

【解决方案4】：

这可能是相同的必需操作，它表明“Ummar”解决方案也是正确的。

Bind jQuery UI autocomplete using .live()

【讨论】：