ASP.NET jQuery-UI Autocomplete not working

Question

I have an ASP.NET 4.5 WebForm app where I want to add autocomplete to a TextBox. I was looking into jquery-ui but I can't seem to make it work.

I'm using jquery 3.1.1 and jquery-ui 1.12.1. Here is the head part of my aspx page.

ASPX

<head runat="server">    
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  

    <script type="text/javascript">
        $(document).ready(function () {
            $("#SearchDynamicTxt").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "UserReports.aspx/GetUsers",
                        data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        });
    </script>
</head>

Here is the text control:

<asp:TextBox ID="SearchDynamicTxt" runat="server" OnTextChanged="SearchDynamicTxt_TextChanged" AutoPostBack="true" ></asp:TextBox>

Here is the code behind:

[WebMethod]
        public static string[] GetUsers(string term)
        {
            List<string> usersList= new List<string>();
            string CS= ConfigurationManager.ConnectionStrings["UsersCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CS))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("SELECT Name FROM Customers WHERE Name Like '" + term + "%'", con);
                SqlDataReader reader = cmd.ExecuteReader();
                while(reader.Read())
                {
                    usersList.Add(reader[0].ToString());
                }
            }
            return usersList.ToArray();
        }

I'm sure there is something that I forgot or misspelled but I don't know what or where. When I try writing something in the control, nothing happens. I would like it to show me a list of possible matching users and when I select one of them, to call the method OnTextChanged.

Update

Now that the dropdownlist shows up, I want to select an user and that selection to trigger the OnChanged method. Currently this is not happening. I need to press enter or click somewhere on the page to generate a postback and then it detects the OnChanged text. I'm guessing that I need to change this:

success: function (data) 
{
     response(data.d);
},

Perhaps adding an event parameter or something?

do you need these OnTextChanged="SearchDynamicTxt_TextChanged" AutoPostBack="true" on your text box?? — Karthik Ganesan
– Karthik Ganesan, Commented Jul 14, 2017 at 13:36

nikunj sobhashana · Accepted Answer · 2017-07-14 07:35:58Z

2

data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",

here is the issue because jquery does not find the asp.net element directly so you need to apply following

$('#<%=SearchDynamicTxt.ClientID %>').val()

its working

answered Jul 14, 2017 at 7:35

nikunj sobhashana

18110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cosmos24Magic Over a year ago

It's not working in my case because the textbox is inside a LoginView so if you use SearchDynamicTxt.ClientID it will say that it doesn't exist in the current context. Try adding a LoginView and put the textbox inside it and you will see what I mean.

Cosmos24Magic · Accepted Answer · 2017-07-14 10:15:05Z

0

How is it that I struggle for 2 days to fix something and fail, but after posting on stackoverflow I find the answer in 5 minutes :))

The problem was that I was trying to access the textbox with $("#SearchDynamicTxt"), but the textbox is inside a LoginView.

So I changed it with:

$("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>")

Now it works perfectly !!!

Found the answer for UPDATE 2 as well. Turns out I needed to write in the autocomplete (not the ajax) the following:

select: function (event, ui) 
{
     $("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>").trigger("change");
}

Hope this helps others that are stuck like I was.

edited Jul 14, 2017 at 10:15

answered Jul 14, 2017 at 7:33

Cosmos24Magic

2291 gold badge4 silver badges19 bronze badges

1 Comment

Sean Kendle Over a year ago

You can also use ClientIDMode="Static" in the control to prevent ASP.net from changing the ID.

Jigs17 · Accepted Answer · 2017-07-14 13:33:39Z

0

try this one:

data: "{'term':'" + request.term + "'}",

answered Jul 14, 2017 at 13:33

Jigs17

494 bronze badges

Collectives™ on Stack Overflow

ASP.NET jQuery-UI Autocomplete not working

Update

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related