jQuery UI自动完成不触发-ASP.Net

Question

I have multiple textfields in my Aspx form and I want to achieve Autocomplete for each of them. Below is the code which I have written which will call web service and fill up the values for autocomplete.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function () {
        $("[id*=txtGroup]").autocomplete({
            source: function (request, response) {
                var input = this.element;
                $.ajax({
                    url: '<%=ResolveUrl("~/WebService/GroupWebService.asmx/GetGroup") %>',
                    data: "{ 'prefixText': '" + request.term + "','UserNo' :'" + $(input).next().val() + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("[id*=hfGroupID]", $(e.target).closest("td")).val(i.item.val);
            },
            minLength: 1
        });
    });

The issue is, the autocomplete function does not fire in any browser. Also I do not get any error in console.

Below is the code of my webservice

        SQLHelper sqlHelper = new SQLHelper();

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string[] GetGroup(string prefixText, string UserNo)
    {
        List<string> lstString = new List<string>(10);
        List<Group> lstGroup = new List<Group>();
        string errorMessage = string.Empty;
        DataSet result = this.sqlHelper.GetData(SPNames.GetGroupMasterData, CommandType.StoredProcedure, null, ref errorMessage);
        if (string.IsNullOrEmpty(errorMessage))
        {
            DataTable dtGroup = result.Tables[0];

            if (dtGroup != null && dtGroup.Rows.Count > 0)
            {
                DataRowCollection rows = dtGroup.Rows;

                foreach (DataRow row in rows)
                {
                    lstGroup.Add(new Group()
                                        {
                                            GroupID = Convert.ToInt32(row[SQLColumn.GroupID]),
                                            GroupNo = Convert.ToString(row[SQLColumn.GroupNo]),
                                            Description = Convert.ToString(row[SQLColumn.Description]),
                                        });
                }
            }
        }

        if (lstGroup.Count > 0)
        {
            if (string.IsNullOrEmpty(UserNo) == false)
            {
                lstGroup = lstGroup.Where(x => x.GroupNo.Substring(0, 1).Contains(UserNo)).ToList();    
            }

            lstGroup = lstGroup.Where(x => x.GroupNo.Contains(prefixText)).ToList();

            int i = 0;
            foreach (Group group in lstGroup)
            {
                if (i > 20)
                {
                    break;
                }
                lstString.Add(string.Format("{0}-{1}", group.GroupNo, group.GroupID));
                i++;
            }
        }

        return lstString.ToArray();
    }

Can anyone please help me on this?

Answer 1

Try this

<script type="text/javascript">
        $(document).ready(function () {
            $("#txtGroup").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/WebService/GroupWebService.asmx/GetGroup") %>',
                    data: "{ 'prefixText': '" + request.term + "','UserNo' :'" + $(this.element).next().val() + "'}",
                        type: "POST",
                        dataType: "json",                        
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.split('-')[0], value: item.split('-')[1] };
                            }))
                        },
                        error: function () {
                            alert('something went wrong !');
                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                }
            });
        })
    </script>

Answer 2

Jquery:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
      $(document).ready (function () {
          $("#txtsearch").autocomplete({
              autoFocus: true,
              source: function (request, response) {
                  $.ajax({
                      url: "default2.aspx/GetMovieName",
                        data: "{'MovieName': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item
                                }
                            }))
                        },
                        messages: {
                            noResults: "", results: ""
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
               //minLength to specify after how many characters input call for suggestions to be made.
               minLength: 1,
           });
      });
  </script>

Code:

[WebMethod]
    public static List<string>GetMovieName(string MovieName)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
        SqlCommand cmd = new SqlCommand("Select name from tb_movie where name like @name +'%'", con);
        cmd.Parameters.AddWithValue("@name", MovieName);
        con.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        List<string> movienames = new List<string>();
        while (dr.Read())
        {
            movienames.Add(dr["name"].ToString());
        }
        con.Close();
        return movienames;
    }