附加JQuery的自动完成功能是由Ajax调用加载的文本字段 [英] Attach JQuery Autocomplete to a text field which is loaded by Ajax call

问题描述

我在，我创建了一个精灵，每个向导页中包含有填充数据库中不同形式的字段，如用户presses下一个页面的数据从服务器中使用Ajax调用检索到一个简单的Web应用程序。这里是从服务器中检索针对Ajax调用的页面的code。我使其易于理解。

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

和Java脚本code，用于连接自动填充到关键字文本字段是

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

现在的问题是，表单的用户presses下及 $（文件）。就绪后装（）功能已经发射时 #nalertkw 文本字段不存在。因此，自动完成无法正常工作。我使用的jQuery UI自动完成，我怎么可以连接自动完成到怎样通过Ajax加载一个文本框打电话？

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?

编辑：另外我曾与文本框，并附加自动填充到该文本字段以同样的方式测试了我的一个简单的页面设置（不包括Ajax调用）。它的工作原理精绝。它确认自动完成设置是正确的，但是，当连接到它是通过Ajax调用检索的文本框，否则请不要工作。

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.

推荐答案

最好的解决办法，我发现

best solution I have found

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

只要提起点击自动完成连接到它的文字...有人叶回答这个解决我的问题，但已经删除了他的回答。我只能让很少更改自己的code和启动工作，所以我决定把答案去帮助别人。感谢大家的建议。 @Raghav，解决方案看起来也不错，我想它会工作也..所以upvote你@Raghav。谢谢你。

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.

这篇关于附加JQuery的自动完成功能是由Ajax调用加载的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！