2012-08-22 106 views
0

我有一個文本框連接到jQuery UI自動填充小部件。自動完成的源代碼是返回「Person」對象列表的WebMethod。用戶將開始輸入個人姓名,然後從自動完成列表中進行選擇。然後,我希望其他幾個文本框根據從自動完成列表中選擇的項目填充值(公司,電話,電子郵件等)。這些其他值包含在返回的「Person」對象中。不從WebMethod返回對象填充文本框自動完成

我的WebMethod正在成功填充對象列表,但當用戶輸入文本時不會顯示自動完成列表。我不知道如何判斷對象列表是否實際上正確傳遞迴jQuery Autocomplete。

所以這是一個2部分的問題:

  1. 爲什麼自動完成列表中沒有顯示?
  2. 是我的代碼來填充輔助文本框是否正確?

請注意,我已經看過所有其他'可能被認爲是重複'的問題,但他們都沒有解決這個特定的情況。

我的Person類:

public class Person 
{ 
    //New properties ------------- 
    public string label {get; set;} 
    public string value {get; set;} 
    // ---------------------------- 
    public string Name {get; set;} 
    public string Company {get; set;} 
    public string Phone {get; set;} 
    public string Mobile {get; set;} 
    public string Email {get; set;} 
    public string Fax {get; set;} 
} 

的HTML/JavaScript的:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    <link href="Scripts/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"> 
    </asp:ScriptManager> 
    <div> 
     <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
    </div> 
    <div> 
     <asp:TextBox ID="txtCompany" runat="server" ></asp:TextBox> 
     <asp:TextBox ID="txtPhone" runat="server" ></asp:TextBox> 
     <asp:TextBox ID="txtMobile" runat="server" ></asp:TextBox> 
     <asp:TextBox ID="txtEmail" runat="server" ></asp:TextBox> 
     <asp:TextBox ID="txtFax" runat="server" ></asp:TextBox> 
    </div> 
    <script type="text/javascript"> 
     PageMethods.SearchContacts(function (results) { 
      $("#txtName").autocomplete({ 
       source: results, 
       select: function (event, ui) { 
        $('#txtCompany').val(ui.item.company); 
        $('#txtPhone').val(ui.item.phone); 
        $('#txtMobile').val(ui.item.mobile); 
        $('#txtEmail').val(ui.item.mobile); 
        $('#txtFax').val(ui.item.mobile); 
       } 
      }); 
     }); 
    </script> 
</asp:Content> 

Person對象的的WebMethod返回列表:

[System.Web.Script.Services.ScriptMethod()] 
[System.Web.Services.WebMethod] 
public static List<Person> SearchContacts() 
{ 
    try 
    { 
     using (SqlConnection conn = new SqlConnection()) 
     { 
      conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString; 
      using (SqlCommand cmd = new SqlCommand()) 
      { 
       cmd.CommandText = "SELECT Name, Company, PhoneOffice, PhoneMobile, Email, Fax FROM Contacts"; 
       cmd.Connection = conn; 
       conn.Open(); 
       List<Person> contacts = new List<Person>(); 
       using (SqlDataReader sdr = cmd.ExecuteReader()) 
       { 
        while (sdr.Read()) 
        { 
         Person person = new Person(); 
         //New properties -------------------- 
         person.label = sdr["Name"].ToString(); 
         person.value = sdr["Name"].ToString(); 
         // ---------------------------------- 
         person.Name = sdr["Name"].ToString(); 
         person.Company = sdr["Company"].ToString(); 
         person.Phone = sdr["PhoneOffice"].ToString(); 
         person.Mobile = sdr["PhoneMobile"].ToString(); 
         person.Email = sdr["Email"].ToString(); 
         person.Fax = sdr["Fax"].ToString(); 
         contacts.Add(person); 
        } 
       } 
       conn.Close(); 
       return contacts; 
      } 
     } 
    } 
    catch (Exception ex) 
    { 
     throw new Exception(ex.Message); 
    } 
} 
+0

自動完成小部件需要一個包含'label'屬性,'value'屬性或兩者的對象的數組。您的「人物」對象不符合該規則。 –

+0

@AndrewWhitaker感謝您的信息。在這種情況下,'label'和'value'的值是什麼?這些人的名字? – Dhaust

+0

是的,嘗試添加這些屬性,看看會發生什麼 –

回答

1

想通了一些幫助,從Andrew

第一件事是給我的Person類添加'標籤'和''值'屬性。該jQuery Autocomplete widget預計,以下數據格式對象的數組:

[ { label: "Choice1", value: "value1" }, ... ] 

第二件事是,我需要設置ClientIDMode到「靜態」上的所有文本框。

<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox> 

第三件事是在JavaScript中引用對象屬性區分大小寫。

$('#txtCompany').val(ui.item.Company); //Needed uppercase 'C' on Company to match class definition