[c#]显示自定义数据的 asp.net 文本框自动完成

标签: Asp.net jQuery C#
发布时间: 2017/2/25 3:43:11
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我使用 jquery 自动完成。下面的代码,我用来从数据库中获取数据。

public void ProcessRequest(HttpContext context)
{
    string prefixText = context.Request.QueryString("q");
    MySqlConnection conn = new MySqlConnection();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings("conio").ConnectionString;
    MySqlCommand cmd = new MySqlCommand();
    cmd.CommandText = ("select cityCode,city,metro,status from cities where (cityCode like @SearchText)");
    cmd.Parameters.AddWithValue("@SearchText", "%" + prefixText + "%");
    cmd.Connection = conn;
    StringBuilder sb = new StringBuilder();
    conn.Open();
    MySqlDataReader sdr = cmd.ExecuteReader;
    while (sdr.Read) {
        sb.Append(sdr("cityCode")).Append(Environment.NewLine);
    }
    conn.Close();
    context.Response.Write(sb.ToString);
}

此代码工作,但我需要添加一个更多的功能。通过显示 cityCode 我也想要各自城市名称显示为井赵平

PNQ(PUNE)

PNQ 这里是代码 & 浦那是城市的名称,所以想在建议结果显示像这样。但当用户选择任何值然后在文本框中它只应获得代码没有名称。任何人都可以指导我怎么可以这样?

解决方法 1:

有是没有内置的办法做到这一点。相反,您应该重写选择事件,并更新输入的值自己;

//You need to pass data like following from code behind:
[{
    "label": "PNQ(PUNE)",
    "value": "PNQ"
}, {
    "label": "PNQ1(PUNE1)",
    "value": "PNQ1"
}]



[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string[] GetCustomers(string prefix)
    {
        List<string> customers = new List<string>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select ContactName, CustomerId from Customers where " +
                "ContactName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefix);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
                    }
                }
                conn.Close();
            }
            return customers.ToArray();
        }
    }

$("#autocomplete").autocomplete({
                select: function (event, ui) {
                    //Instead of ui.item.label need to use ui.item.value
                    $(this).val(ui.item.value);

                },
                source: function (request, response) {
                    $.ajax({
                     url: '<%=ResolveUrl("~/page.aspx/GetCustomers") %>',
                     data: "{ 'prefix': '" + request.term + "'}",
                     dataType: "json",
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     success: function (data) {
                         response($.map(data.d, function (item) {
                            return {
                              label: item.split('-')[0],
                              val: item.split('-')[1]
                            }
                         }))
                     },
                     error: function (response) {
                      alert(response.responseText);
                     },
                     failure: function (response) {
                       alert(response.responseText);
                     }
                   });
                },
                minLength: 1
});
官方微信
官方QQ群
31647020