asp.net textbox autocomplete顯示自定義數據

Question

我正在使用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我也想展示各自城市名稱以及F，G

PNQ（浦那）

這裏PNQ是代碼&浦那城​​的名字，所以我想建議，結果顯示是這樣的。但是，當用戶選擇任何值，然後在文本框中，它應該只獲取代碼不是名稱。任何人都可以指導我如何做到這一點？

Answer 1

有沒有內置的方式來做到這一點。相反，您應該重寫select事件，並自己更新輸入值;

//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 
});