Javascript autocomplete not working in ascx

Question

I have a autocomplete in a grid-view in a ascx file but the autocomplete is not working in the ascx file. I have made several similar autocomplete in other page that work. Why is it that the autocomplete does not work in my ascx file. I have a hypotheses why it does not work but I am unsure how to fix it here it is

I think that the problem is with the following url in the javascript

      url: "contratoGerencia.aspx/getSupplierAndComponente"

However I dont know how I should change it don get it to work with the ascx file.Also I found a solution here https://www.codeproject.com/Questions/757769/How-to-Call-Ascx-page-form-JavaScript-Funnction-Of that is almost what I want the only problem is that I also have a textbox in my situation. Any help would be very appreciated. I hope the following information will help you.

Here is my ascx (ComponentesControler.ascx) code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="../css/autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../scripts/autocomplete.js" ></script>
    <asp:TextBox CssClass="gridContractAndComponente" ID="txtContractComponenteFooter" Text="" runat="server" TextMode="MultiLine" Rows="1" />

Here is my ascx.cs (ComponentesControler.ascx.cs) code

   [WebMethod]
        public static List<string> getSupplierAndComponente(string prefixText)
        {
            string lv_numero_contrato;
            List<string> numeros_contrato = new List<string>();
            connectionStringBuilder builder = new connectionStringBuilder();
            String connString;
            connString = builder.builder.ConnectionString;

            string selectStatement = " SELECT numero_contrato FROM erp_contratos ";


            using (MySqlConnection conn = new MySql.Data.MySqlClient.MySqlConnection(connString))
            {
                conn.Open();
                using (MySqlCommand cmd = conn.CreateCommand())
                {
                    cmd.CommandText = selectStatement;
                    cmd.Parameters.AddWithValue("@searchText", prefixText);
                    using (MySqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            lv_numero_contrato = reader.GetString(reader.GetOrdinal("numero_contrato"));
                            numeros_contrato.Add(lv_numero_contrato);
                        }
                    }
                    conn.Close();
                }
            }
            return numeros_contrato;
        }

Here is the aspx page (contratoGerencia.aspx) were I use the ascx file

  <div id="ComponentesSection" class="menusection">         
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always" >
      <ContentTemplate>                   
    <TWebControl5:WebControl5 ID="Header8" runat="server" />                   
    </ContentTemplate>  
   </asp:UpdatePanel>
  </div>

Here is my javascript file (autocomplete.js)

$(document).ready(function () {
    SearchSupplierAndComponente();
});
function SearchSupplierAndComponente() {
    $(".gridContractAndComponente").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "contratoGerencia.aspx/getSupplierAndComponente",
                data: "{'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    });
}

Answer 1

The problem is in the name of your parameter entered in AJAX, your method expects to receive a parameter named prefixText and not containedText.

Change

data: {'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}

with

data: {'prefixText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}