Multi usercontrol with jquery autocomplete not showing all list

In my asp.net C# website, I have a requirement to add the autocomplete for some text fields. For that I'm using jquery autocomplete.

I'm having a parent user control and also two child user control(only for text boxes) inside it. Both three user controls have their own autocomplete list.

The problem is, when I run the program, only one autucomplete list shows list of items. Other two are silent!.

If anyone has any idea, please share it here.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Contact.ascx.cs" Inherits="Controls_Contact" %> <%@ Register Src="ContactSub.ascx" TagName="ContactSub" TagPrefix="ContactSub_UC" %>

<script type="text/javascript">
function LoadList_contact()
{
    alert("check main");
    $("#<%= ContactSurnameTextBox.ClientID %>").autocomplete({
        source: "../ashx/AutoComplete_Contacts.ashx",
        minLength: 1,
        select: function (event, ui)
        {
            $(this).next().val(ui.item.id);
            $("#<%= ContactIdTextBox.ClientID %>")[0].value = ui.item.id;
            __doPostBack('<%= ContactSurnameTextBox.ClientID %>', '');
        },

        search: function (event, ui)
        {
            $(this).n开发者_如何学编程ext().val('');
            $("#<%= ContactIdTextBox.ClientID %>")[0].value = '';
        }

    })
    .data("autocomplete")._renderItem = function (ul, item)
    {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a><table cellpadding='0' cellspacing='0' border='0' width='250'><tr><td width='*' valign='top' align='left'>" + item.value + "</td><td width='50px' valign='top' align='left'></td></tr></table></a>")
            .appendTo(ul);
    };
}

<asp:TableRow>
    <asp:TableCell ID="ContactSubCell" runat="server">
        <ContactSub_UC:ContactSub ID="ContactSub" runat="server" />
    </asp:TableCell>
</asp:TableRow>


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactSub.ascx.cs" Inherits="Controls_ContactSub" %>

<%@ Register src="ProductsTextbox.ascx" tagname="ProductsTextbox" tagprefix="ProductsTextbox_UC" %> <%@ Register src="BrandLine.ascx" tagname="BrandLine" tagprefix="BrandLine_UC" %>

<asp:TableCell ColumnSpan="3">
    <BrandLine_UC:BrandLine ID="BrandLine" runat="server" />
</asp:TableCell>

<asp:TableCell ColumnSpan="3">
    <ProductsTextbox_UC:BrandLine ID="ProductsTextbox" runat="server" />
</asp:TableCell>

Thanks

Rbz

<input id="first_AT"><input id="second_AT">

For each input provide difrent id or class.

$('#first_AT, #second_AT').autocomplete();