Autocomplete does not work in ASP.Net webform with masterpage

Question

I'm having a bot trouble with the script. I have a web form named CoursesPage.aspx which has a master page. I have used autocomplete using Jquery on a textbox that brings course names from a database. The jQuery works like a charm on pages that don't have a masterpage but it's not working on this page.

This is the code.

<link rel="stylesheet" href="css/jquery-ui.css" />

    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
            function LoadList() {
                alert("I'm good");
                var ds = null;
                ds = <%=listFilter %>
        $("#txtName").autocomplete({
            source: ds
        });
        }


            $(function () { LoadList(); });
   </script>

I put alert("I'm good"); just to see if the script fires, turns out it does. So there's no problem with the files. But the rest doesn't.

This is the code behind:

private string BindName()
    {
        DataTable dt = null;
        using (MakeConn())
        {
            using (SqlCommand cmd = conn.CreateCommand())
            {
                cmd.CommandType = CommandType.Text;
                cmd.CommandText = "select distinct Name from courses";
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    dt = new DataTable();
                    da.Fill(dt);
                }
            }
        }

        StringBuilder output = new StringBuilder();
        output.Append("[");
        for (int i = 0; i < dt.Rows.Count; ++i)
        {
            output.Append("\"" + dt.Rows[i]["Name"].ToString() + "\"");

            if (i != (dt.Rows.Count - 1))
            {
                output.Append(",");
            }
        }
        output.Append("];");

        return output.ToString();
    }

Answer 1

You did not provide the markup from your .aspx code. But most likely the ID that is generated for you TextBox is different due to ClientIdMode. You can view the generated HTML for your page if you're not sure.

What you should do is set the ClientIdMode for your TextBox to Static. Then the ID on the client side will be "txtName".

<asp:TextBox runat="server" id="txtName" ClientIdMode="Static" />

For more info, see MSDN ASP.NET Web Server Control Identification.

---

You can set the ClientIdMode for all controls on all pages with a single setting in your web.config.

<configuration>
    <system.web>
        <pages clientIDMode="Static"></pages>
    </system.web>
</configuration>

I got the directions for this here.

---

Another way is to put ASP.NET inline to give JavaScript the ClientId. This has the advantage that if you delete or rename txtName for some reason, it'll cause a compilation error instead of silently failing at runtime.

$("#<%= txtName.ClientID  %>").autocomplete();

Answer 2

Try with:

$("#ContentPlaceHolder1_txtName").autocomplete({
        source: ds
    });

The id of your TextBox will probably be identified with the ContentPlaceHolderID followed by "_" and your TextBox id. Try using the Chrome ispector and see what id your TextBox identifies