Images not displaying in autocomplete list of ASP.Net AJAX AutoCompleteExtender

Last Reply on Mar 21, 2017 09:07 AM By micah

Posted on Mar 21, 2017 01:47 AM

My AjaxComplete not showing image, its only showing the usernames and names

cSharp

 [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> SearchEmployees(string prefixText, int count)
    {
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["conn"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select UserName,UserId,Name from User3 where " + "UserName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                conn.Open();
                List<string> Searchusernames = new List<string>();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {

                        Searchusernames.Add(AjaxControlToolkit.AutoCompleteExtender
                       .CreateAutoCompleteItem(string.Format("{0} {1}", sdr["Name"], sdr["UserName"]), sdr["UserId"].ToString()));
                    }
                }
                conn.Close();
                return Searchusernames;
            }
        }
    }

html

<div class="input-group">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
    </asp:ScriptManager>
    <asp:TextBox ID="txtContactsSearch" runat="server" class="form-control" placeholder="Search post..." Width="100%"></asp:TextBox>
    <asp:AutoCompleteExtender ServiceMethod="SearchEmployees"
    MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch" OnClientPopulated ="usernames_Populated"
    OnClientItemSelected = "OnEmployeeSelected" ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false"></asp:AutoCompleteExtender>
    <span class="input-group-btn">
        <asp:LinkButton ID="LinkButton2" runat="server" class="btn btn-default" > 
            <i class="fa fa-search"></i>
        </asp:LinkButton>
    </span>
</div>
Posted on Mar 21, 2017 08:11 AM

For AutoCompleteExtender You are using UserId as Image Path as it added in Searchusernames list you need to pass the ImageName column value to display the image also check the proper src path in usernames_Populated after modifying the searchEmployee Webmethod. First change the searchEmployee with below line of code.

Searchusernames.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(string.Format("{0} {1}", sdr["Name"], sdr["UserName"]), sdr["ImageName"].ToString()));

Then check the usernames_Populated in which you are setting innerHTML for Image Tag with src path assigned for images. Also if you are talking value of ImagePath column then remove .jpg from innerHTML once you change in searchEmployee method.

eg. Check the below code and modify according to your method

div.innerHTML = "<img style = 'height:50px;width:50px' src = 'photos/"
        + employees[i]._value + "' /><br />"