Dynamic Ids in User Control to avoid duplication in JavaScript and Asp page

Question

I have an ASP.Net user control, it has a text box and list box, I have given them unique ids and classes, as a user control if I drag it twice or more on asp.net page, it will not work because of same ids when compiled, please see the code below -

 $("#liAutoCompleteTextBox").html("<ul class='ecm-autocomp-light'>");
              $("#ddlAutoCompleteTextBox > option").each(function () {
                  if($(this).text().toLowerCase().match(txtVal)) {
                      $("#liAutoCompleteTextBox").append("<li class='ecm-autocomp-light' onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')><a onclick=updateToAutoCompleteTextBox('" +encodeURI( this.text) + "')>" + this.text + "</a></li>");
                      }
              });

The user control has script like above, this is just one example.

And in aspx we have,

<label class="input" id="AutoCompleteTextBoxText" runat="server">
    <asp:TextBox ID="txtAutoCompleteTextBox" AutoCompleteType="None" autocomplete="off" onfocusout="$('#liAutoCompleteTextBox').fadeOut()" onkeyup="liAutoCompleteTextBoxFunc()" runat="server" CssClass="input-sm isReq isRestrictedText txtAutoCompleteTextBoxCls"></asp:TextBox>
</label>
<label class="select" style="display: none">
    <asp:DropDownList ID="ddlAutoCompleteTextBox" ClientIDMode="Static" runat="server" CssClass="input-sm ddlAutoCompleteTextBoxCls">
    </asp:DropDownList>
    <i></i>
</label>
<div id="liAutoCompleteTextBox" class="customAutoCompDiv" style="position: absolute; display: none; padding: 5px; border: 1px #808080 solid; background: #fff; z-index: 1000; width: 90.5%;">
</div>

I want to make all the ids completely dynamic. Is there any specific control id which I can use with all the names and classes, or is there any other way to handle this?

Answer 1

If you change the liAutoCompleteTextBox div to a Panel (which is a div in html) and put the script inside the UserControl then it will work. When it is a Panel you have access to it's ClientID. Now no matter how much controls you put on the parent page, the javascript will still reference the correct controls.

 <!-- begin user control -->

<label class="input" id="AutoCompleteTextBoxText" runat="server">
    <asp:TextBox ID="txtAutoCompleteTextBox" AutoCompleteType="None" autocomplete="off" onfocusout="$('#liAutoCompleteTextBox').fadeOut()" onkeyup="liAutoCompleteTextBoxFunc()" runat="server" CssClass="input-sm isReq isRestrictedText txtAutoCompleteTextBoxCls"></asp:TextBox>
</label>
<label class="select" style="display: none">
    <asp:DropDownList ID="ddlAutoCompleteTextBox" ClientIDMode="Static" runat="server" CssClass="input-sm ddlAutoCompleteTextBoxCls">
    </asp:DropDownList>
    <i></i>
</label>

<asp:Panel ID="liAutoCompleteTextBox" runat="server" CssClass="customAutoCompDiv" Style="position: absolute; display: none; padding: 5px; border: 1px #808080 solid; background: #fff; z-index: 1000; width: 90.5%;"></asp:Panel>

<script type="text/javascript">
    $("#<%= liAutoCompleteTextBox.ClientID %>").html("<ul class='ecm-autocomp-light'>");
    $("#<%= AutoCompleteTextBoxText.ClientID %> > option").each(function () {
        if ($(this).text().toLowerCase().match(txtVal)) {
            $("#<%= liAutoCompleteTextBox.ClientID %>").append("<li class='ecm-autocomp-light' onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')><a onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')>" + this.text + "</a></li>");
        }
    });
</script>

<!-- end user control -->

What is important to remember that when the Control and the Control.ClientID are in the same Page/UserControl their ID will be correct.