ASP.NET UserControl的多个实例，在同一页面上具有查询自动完成功能

I'm quite new to jquery and javascript programming in general so please be patient.

我对jquery和javascript编程很新，所以请耐心等待。

I have an ASP.NET web user control (region.ascx) that contains an instance of the jquery autocomplete plugin. The jquery code (i have cutoff the code for brevity) is this:

我有一个ASP.NET Web用户控件（region.ascx），其中包含jquery自动完成插件的实例。 jquery代码（我为了简洁而截断了代码）是这样的：

$(function () {
    initializerRegion();
});

var prmInstance = Sys.WebForms.PageRequestManager.getInstance();

prmInstance.add_endRequest(function () {
    //you need to re-bind your jquery events here 
    initializerRegion();
});

function initializerRegion() {

    $($get('<%= autoRegion.ClientID %>')).autocomplete({
        source: function (request, response) {..........................

The control works fine when there is only one instance of the control on an asp.net page. I have a situation where I have two separate user controls (Org.ascx and Place.ascx) that each have an instance of region.ascx that are on a single asp.net page, therefor i end up with 2 instances of the above code. When this is the case only the last instance (for place.ascx) is initialized correctly and works. The other instance (org.ascx) doesn't do anything.

当asp.net页面上只有一个控件实例时，控件可以正常工作。我有一种情况，我有两个单独的用户控件（Org.ascx和Place.ascx），每个用户控件都有一个在一个asp.net页面上的region.ascx实例，因此我最终得到了上述代码的2个实例。在这种情况下，只有最后一个实例（对于place.ascx）被正确初始化并且有效。另一个实例（org.ascx）没有做任何事情。

I think I may be able to get around this by putting the Initializer code above into each of the controls that needs it, essentially getting rid of my region.ascx control. I have a feeling that if I do this and make the names of the initializer functions unique it may work.

我想我可以通过将Initializer代码放在需要它的每个控件中来解决这个问题，基本上摆脱了我的region.ascx控件。我有一种感觉，如果我这样做并使初始化函数的名称唯一，它可能会起作用。

My question is: Am I doing this correctly? Is there a way around this?

我的问题是：我这样做是否正确？有没有解决的办法？

3 个解决方案

#1

The problem in your code is that prmInstance variable and initializerRegion function declared in global execution context. So the last control overrides initializerRegion function definition. To fix this you may wrap all your code in self called function like below:

代码中的问题是在全局执行上下文中声明的prmInstance变量和initializerRegion函数。所以最后一个控件会覆盖initializerRegion函数定义。要解决此问题，您可以将所有代码包装在自调用函数中，如下所示：

(function () {
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        //you need to re-bind your jquery events here 
        initializerRegion();
    });

    var initializerRegion = function () {
        $('#<%= autoRegion.ClientID %>').autocomplete({
            source: function (request, response) {
                //......
            },
            //......
        });

        $(function () {
            initializerRegion();
        });
    })();

This code works well for me:

这段代码适合我：

ascx:

ASCX：

<script type="text/javascript">
    (function () {
        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
        prmInstance.add_endRequest(function () {
            initialize();
        });

        var initialize = function () {
            $("#<%= TextBox1.ClientID %>").on("keyup", function () {
                alert(this.value);
            });
        };

        $(function () {
            initialize();
        });
    })();
</script>
<asp:TextBox runat="server" ID="TextBox1" />

aspx:

ASPX：

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="ucWebUserControl2" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="WebUserControl1" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

#2

The code

代码

$(function () {
    initializerRegion();
});

Is the root of your problem. This translates to $document.Ready() which can be handled only once. So instead of having this region at your user control level, it should always be at page level. In the mentioned scenario you have two instances of the same user control, but instead of that if you had two separate user controls with the similar initialization, your code would have still failed.

是问题的根源。这转换为$ document.Ready（），只能处理一次。因此，不应将此区域置于用户控制级别，而应始终位于页面级别。在上面提到的场景中，您有两个相同用户控件的实例，但如果您有两个具有类似初始化的单独用户控件，那么您的代码仍然会失败。

Place the above code in the page in which the user controls are added and your code should work fine.

将上面的代码放在添加了用户控件的页面中，您的代码应该可以正常工作。

Let me know whether this works for you or not.

让我知道这是否适合你。

#3

you can use jquery instead of asp.nettoolkit autocomplete and it will allow you use as many automplete that you want

你可以使用jquery而不是asp.nettoolkit自动完成，它将允许你使用你想要的尽可能多的自动完成

<script type="text/javascript">
    $(function () {
        $("#txtBoxWord").autocomplete({
            source: function (request, response) {

                $.ajax({
                    url: "AutoComplete.asmx/GetCompletionList",
                    data: "{ 'prefixText': '" + request.term + "','count':'10',contextKey:" + comboboxLang.GetSelectedIndex() + " }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        $(".ui-autocomplete").css("width", "340px");
                        if (comboboxLang.GetSelectedIndex() == 0) {
                            $(".ui-autocomplete").css("direction", "ltr");
                        }
                        if (comboboxLang.GetSelectedIndex() == 1) {
                            $(".ui-autocomplete").css("direction", "rtl");
                        }
                        response($.map(data.d, function (item) {
                            return {
                                value: item
                            };
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1

        });
    });
</script>

and this is a good example
Three different way of using jquery autocomplete with asp.net

这是一个很好的例子使用jQuery自动完成与asp.net的三种不同方式