jQuery UI自動完成未觸發 - ASP.Net

Question

我在我的Aspx窗體中有多個文本框，我想爲它們中的每一個實現自動完成。下面是我寫的代碼，它將調用Web服務並填寫自動完成的值。

<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 
     }); 
    }); 

的問題是，自動完成功能不火在任何瀏覽器。我也沒有在控制檯中發現任何錯誤。

下面是我的web服務的代碼

 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(); 
    } 

任何人都可以請幫我在這？

Answer 1

試試這個

<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> 

代碼：

[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; 
    }