0

我有一个连接到 jQuery UI 自动完成小部件的文本框。自动完成的来源是返回“Person”对象列表的 WebMethod。用户将开始输入人名,然后从自动完成列表中进行选择。然后,我希望其他几个文本框根据从自动完成列表中选择的项目填充值(公司、电话、电子邮件等)。这些其他值包含在返回的“Person”对象中。

我的 WebMethod 已成功填充对象列表,但在用户输入文本时未出现自动完成列表。我不确定如何判断对象列表是否真的被正确地传回给 jQuery 自动完成。

所以这是一个两部分的问题:

  1. 为什么没有填充自动完成列表?
  2. 我填充辅助文本框的代码是否正确?

请注意,我已经查看了所有其他“可能被认为是重复的”问题,但没有一个解决了这种特殊情况。

我的人类:

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>

WebMethod 返回的 Person 对象列表:

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

1 回答 1

1

在安德鲁的帮助下想通了

首先是在我的 Person 类中添加 ' label ' 和 ' value ' 属性。jQuery Autocomplete 小部件需要以下对象数组的数据格式:

[ { 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
于 2012-08-23T00:44:01.307 回答