0

以前にこの質問を投稿しようとしましたが、意味がなかったと思います:)。だからここに私の2回目の試みがあります。入力時に従業員の名前を表示するためにjquery ui autocompleteを使用するasp.netプロジェクトがあります。その部分はうまくいきました。しかし、私がやりたかったのは、オートコンプリートの結果が表示されたときに各従業員の画像を追加することです。たとえば、「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 に答える