jQueryUIオートコンプリートウィジェットに接続されたテキストボックスがあります。オートコンプリートのソースは、「Person」オブジェクトのリストを返すWebMethodです。ユーザーは人の名前の入力を開始し、オートコンプリートリストから選択します。次に、オートコンプリートリストから選択した項目に基づいて、他のいくつかのテキストボックスに値（会社、電話、電子メールなど）を入力します。これらの他の値は、返される'Person'オブジェクトに含まれています。
私のWebMethodはオブジェクトのリストを正常に入力していますが、ユーザーがテキストを入力したときにオートコンプリートリストが表示されません。オブジェクトのリストが実際にjQueryオートコンプリートに適切に渡されているかどうかを確認する方法がわかりません。
したがって、これは2つの部分からなる質問です。
- オートコンプリートリストが表示されないのはなぜですか？
- セカンダリテキストボックスに入力するコードは正しいですか？
私は他のすべての「重複していると見なされる可能性がある」質問を見てきましたが、これらのいずれもこの特定のシナリオに対処していなかったことに注意してください。
My 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);
}
}