1

私はjQueryとJSONにかなり慣れておらず、解決できない問題に遭遇しました。ユーザーに名前の入力を開始してもらいたいテキストボックスがあります。ユーザーが名前を選択すると、別のテキストボックスに電子メールアドレスが自動的に入力されます。

私のコードは次のとおりです。これを機能させるための助けをいただければ幸いです。よろしくお願いします！

マークアップ

<input type="text" id="person_name" class="required" />
<input type="text" id="person_email_address" class="required email" />

jQuery

$( "input#person_name" ).autocomplete({
    source: "/autoComplete.aspx",
    dataType: "json",
    minLength: 1,
    select: function( event, ui ) {
        //set email textbox to the email field of the selected item.
    }
});

autoComplete.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    string term = Request.QueryString["term"];

    if (!string.IsNullOrEmpty(term))
    {
        string sql = string.Format("select * from users where first_name like '%{0}%' or last_name like '%{0}%'", term);

        DataTable dt = GetTable(sql);

        foreach (DataRow dr in dt.Rows)
        {
            string name = dr["first_name"].ToString() + dr["last_name"].ToString();
            string email = dr["email"].ToString();
        }

        Response.ContentType = "application/json";
        Response.Write("what goes here so i can access both email and name in the select function?");
    }
}
4

1 に答える 1

1

コードビハインドで次のようなものを使用します。

var items = dt.AsEnumerable().Select(
    dr => new 
    {
        name = dr["first_name"].ToString() + dr["last_name"].ToString(),
        email = dr["email"].ToString()
    }
);
string json = "[" + string.Join(",", 
        items.Select(i => 
            "{ id: '" + i.name + "'"
            + ", label: '" + i.name + "'"
            + ", value: '" + i.email + "'"
            + "}"
        )
    ) + "]";

Response.Write(json);

これにより、名前がラベル、電子メールが値として、正しいJSONが取得されます。次に、Javascript selectコールバック関数で、電子メールテキストボックスを正しい値に設定します。

select: function( event, ui ) {
    //set email textbox to the email field of the selected item.
    $("#person_email_address") = ui.item.value;
}

ノート

コメントによると、上記は変更なしでは無効です。JSON値は二重引用符で囲む必要があります。

于 2012-05-10T01:43:32.870 に答える