處理jQuery中的HttpHandler列...如何在自動完成中添加字段

Question

我試着發佈這個問題前，我想我沒有任何意義:)。所以這是我的第二次嘗試。我有一個asp.net項目，我使用jquery ui autocomplete在打字時顯示員工姓名。我得到了那部分工作正常。但是我想要做的是在自動完成結果出現時爲每位員工添加一張圖片。因此，例如，當您鍵入「J」時，您會看到Joe，Jon等，並在員工照片的每個名稱旁邊。我在數據庫中存儲照片路徑，所以這應該沒有問題，我想。這裏是我的HttpHandler（.NET中的ashx的文件）：

public class LoadNames : IHttpHandler 
    { 
     public void ProcessRequest(HttpContext context) 
     { 
      DataSet ds = null; 
      List<Employee> lstEmployees = new List<Employee>(); 

      ds = GetLoginNames(); 

      if (ds.Tables[0].Rows.Count > 0) 
      { 
       foreach (DataRow dr in ds.Tables[0].Rows) 
       { 
        lstEmployees.Add(new Employee { Name = dr["Login"].ToString(), Picture = dr["Picture"].ToString() }); 
       } 
       StringBuilder builder = new StringBuilder(); 

       foreach (Employee e in lstEmployees) 
       { 
        builder.Append(string.Format("{0}|{1}|{2}", e.Name, e.Picture, Environment.NewLine)); 
       } 
       context.Response.Write(builder.ToString()); 
      } 
     } 

     public DataSet GetLoginNames() 
     { 
      SqlCommand cmdSelect = default(SqlCommand); 
      SqlConnection conMyData = default(SqlConnection); 
      SqlDataAdapter daIssues = default(SqlDataAdapter); 
      System.Data.DataSet ds = null; 

      conMyData = null; 

      //try and make a connection 
      try 
      { 
       conMyData = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["connString"]); 
       cmdSelect = new SqlCommand("selLoginNames", conMyData); 

       var _with1 = cmdSelect; 
       _with1.CommandType = System.Data.CommandType.StoredProcedure; 
       //add parameters 
       _with1.Parameters.Add("@Inactive", SqlDbType.Int).Value = 0; 
       daIssues = new SqlDataAdapter(); 
       daIssues.SelectCommand = cmdSelect; 
       ds = new System.Data.DataSet(); 
       daIssues.Fill(ds); 

       return ds; 
       //catch any exceptions that might be thrown 
      } 
      catch (Exception e) 
      { 
       throw e; 
       //clean up and close resources 
      } 
      finally 
      { 
       conMyData.Close(); 
       cmdSelect = null; 
       conMyData = null; 
      } 
     } 

     public bool IsReusable 
     { 
      get 
      { 
       return false; 
      } 
     } 
    } 

基本上這個類獲取員工的列表中的數據並將其存儲。然後我使用員工名稱：Login及其圖片，Picture構建。所以我讓這部分工作。現在在jQuery方面，我不知道如何修改它以包含圖片。到目前爲止，所有我已經是他們的名字的實際文本：

$("#<%= txtName.ClientID %>").livequery(function() { 
       $(this).autocomplete("LoadNames.ashx", { minChars: 0, delay: 0 }) 
      .result(function (event, data, formatted) { // data[0] : Login, data[1] :Picture, data[2]:newline character 
       if (data[0] != "") { 
        var url = "http://someURL/Default.aspx?Search=" + data[0]; 
        window.open(url); 
       } 
       else { 
       } 
      }); 
      }); 

我的問題是我怎麼修改上面的jQuery來包括在自動完成結果要顯示的圖片？

Answer 1

試試這個：

 $("#<%= txtName.ClientID %>").livequery(function() { 
      $(this).autocomplete("LoadNames.ashx", { minChars: 0, delay: 0, formatItem: function(data, i, n, value) { 
     return "<img src='" + data[1] + "' width='50' height='50'/> " + value.split(".")[0]; 
    }}) 
     .result(function (event, data, formatted) { // data[0] : Login, data[1] :Picture, data[2]:newline character 
      if (data[0] != "") { 
       var url = "http://someURL/Default.aspx?Search=" + data[0]; 
       window.open(url); 
      } 
      else { 
      } 
     }); 
     });