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>
Results 1 - 5 of 12 123
Posted on Mar 21, 2017 09:07 AM

Hello, in added imagename to the select query and also removed .jpg extension in the query code and it worked..Thanks for helping 


Posted on Mar 21, 2017 09:06 AM Modified on on Mar 21, 2017 09:09 AM
micah says:
div.innerHTML = "<img style = 'height:50px;width:50px; margin-left:6px; margin-bottom:6px;' class= ' img-rounded' src = 'PROFILEPHOTOS /"
                + Searchusernames[i]._value + ".jpg' />";

Replace with below code. As your ImageName column contain jpg extension with image name so you don’t need to add .jpg again also remove the space after PROFILEPHOTOS folder name.

div.innerHTML = "<img style='height: 50px; width: 50px; margin-left: 6px; margin-bottom: 6px;'
class='img-rounded' src='PROFILEPHOTOS/" + Searchusernames[i]._value + "' /><br />";

Posted on Mar 21, 2017 08:51 AM

no image showing

 

[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["ImageName"].ToString()));
                    }
                }
                conn.Close();
                return Searchusernames;
            }

 

 <script type = "text/javascript">
        function usernames_Populated(sender, e) {
            var Searchusernames = sender.get_completionList().childNodes;
            for (var i = 0; i < Searchusernames.length; i++) {
                var div = document.createElement("DIV");
                div.innerHTML = "<img style = 'height:50px;width:50px; margin-left:6px; margin-bottom:6px;' class= ' img-rounded' src = 'PROFILEPHOTOS /"
                + Searchusernames[i]._value + ".jpg' />";
                Searchusernames[i].appendChild(div);
            }
        }
        function OnEmployeeSelected(source, eventArgs) {
            var idx = source._selectIndex;
            var Searchusernames = source.get_completionList().childNodes;
            var value = Searchusernames[idx]._value;
            var text = Searchusernames[idx].firstChild.nodeValue;
            source.get_element().value = text;
        }
</script>

 


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 />"

 


Posted on Mar 21, 2017 05:21 AM

They have different names they Can download pictures and upload it