0

我之前尝试过发布这个问题，但我认为我没有任何意义:)。所以这是我的第二次尝试。我有一个 asp.net 项目，我在其中使用 jquery ui 自动完成来在您键入时显示员工的姓名。我让那部分工作正常。但我想做的是在自动完成结果出现时添加每个员工的图像。因此，当您键入“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 以包含要在自动完成结果中显示的图片？

4

1 回答 1

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 {
             }
         });
        });
于 2013-07-03T15:17:32.953 回答