Question

我有一个连接到jQuery UI Autocomplete小部件的文本框。自动完成的源是WebMethod，它返回一个'Person'对象列表。用户将开始键入人员姓名，然后从自动完成列表中进行选择。然后我想要其他几个文本框，根据从自动完成列表中选择的项目填充值（公司，电话，电子邮件等）。这些其他值包含在返回的“Person”对象中。

我的WebMethod已成功填充对象列表，但用户输入文本时不会显示自动填充列表。我不确定如何判断对象列表是否实际上正确传递回jQuery自动完成。

所以这是一个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);
    }
}

Answer 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

文本框自动完成不会从WebMethod返回对象填充

1 个答案: