Question

我有一个简单的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
        });
});

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

编辑：此外，我已经在一个简单的页面（没有Ajax调用）上使用textfield测试了我的设置，并以同样的方式将自动完成附加到该文本字段。它工作得非常好。它确认自动完成设置是正确的，但是当它附加到通过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，解决方案也看起来不错，而且我认为它也会起作用..所以@Raghav为你起了作用。感谢。

Answer 3

加载新页面后：运行自动完成调用。类似的东西：

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

Answer 4

这可能是同一个必需的行动，它表明“Ummar”解决方案也是正确的。

Bind jQuery UI autocomplete using .live()

将JQuery Autocomplete附加到由Ajax调用加载的文本字段

4 个答案: