Adding image to AutoComplete result using jQuery in ASP.Net

micah

SOLVED CLOSED ACTIVE ANSWERED
User: micah
Posted: on Mar 16, 2017 04:23 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 8833
Sample Code: Download

I have AutoComplete which i needed to add image then when the autocomplet displays the username and the image the user can click on it and it will redirect user to profile page.

<!-- jQuery 2.1.4 --><script src="Script/default%20css/AdminLTE-2.2.0/pluginsdefault/jQuery/jQuery-2.1.4.min.js"></script>
    
    <!-- Bootstrap 3.3.2 JS --><script src="Script/default%20css/AdminLTE-2.2.0/bootstrapDefault/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
      <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
    rel="Stylesheet" type="text/css" />
 <script type="text/javascript">
     $(function () {
         $("[id$=txtSearch]").autocomplete({
             source: function (request, response) {
                 $.ajax({
                     url: '<%=ResolveUrl("Default2.aspx/GetNames") %>',
                     data: "{ 'prefix': '" + request.term + "'}",
                     dataType: "json",
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     success: function (data) {
                         response($.map(data.d, function (item) {
                             return {
                                 label: item.split('-')[0],
                                 val: item.split('-')[1]
                             }
                         }))
                     },
                     error: function (response) {
                         alert(response.responseText);
                     },
                     failure: function (response) {
                         alert(response.responseText);
                     }
                 });
             },
             select: function (e, i) {
                 $("[id$=hfUserName]").val(i.item.val);
             },
             minLength: 1
         });
     });
</script>


 <div class="input-group" style="">
                                   <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods = "true">  
  
    </asp:ScriptManager>  
                                  
                                 
                                   <asp:TextBox ID="txtSearch" runat="server" class="form-control" placeholder="Search..."/>

      

    
      <asp:HiddenField ID="hfUserName" runat="server" />
                                   <span class="input-group-btn">
                                   <asp:LinkButton ID="btnSearch" runat="server" class="btn btn-twitter"  EnableViewState="false" CausesValidation="false"> 
                                       <i class="fa fa-search"></i>

                                   </asp:LinkButton>
                                   </span>
                               </div>

code

public partial class Default2 : System.Web.UI.Page
{
    [WebMethod]
    public static string[] GetNames(string prefix)
    {
        List<string> users = new List<string>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select Name from User3 where " + "Name like @txtSearch + '%'";
                cmd.Parameters.AddWithValue("@txtSearch", prefix);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        users.Add(string.Format("{0}", sdr["Name"]));
                    }
                }
                conn.Close();
            }
        }
        return users.ToArray();
    }

AnandM

0 9

Reply
ANSWER
User: AnandM
Replied: on Mar 17, 2017 09:18 AM
Report

Hi micah,

I have created a sample which full fill your requirement please go through the code carefully and implement by modifying the code according to your need and i have saved images in folder with imageName saved in database.

SQL

CREATE TABLE [Users](
    [UserId] [int] IDENTITY(1,1) NOT NULL,
    [Name] [nvarchar](500) NOT NULL,
    [Email] [nvarchar](500) NULL,
    [UserName] [nvarchar](200) NULL,
    [Password] [nvarchar](500) NOT NULL,     
    [ImageName] [nvarchar](505) NULL)
INSERT INTO Users VALUES('John Hammond','John@gmail.com','John1','John@356','John')
INSERT INTO Users VALUES('Suzanne','Suzanne@gmail.com','Suzanne@2','Suzanne@125','Suzanne')
INSERT INTO Users VALUES('Robert Schidner','Robert@gmail.com','Rob@564','Rob@1478','Robert')
INSERT INTO Users VALUES('Mathews','Mathews@gmail.com','Mathews@415','Math@758','Mathews')
INSERT INTO Users VALUES('Luke','Luke@gmail.com','Luke123','Luke@369','Luke')
INSERT INTO Users VALUES('Lokesh','Lokesh@gmail.com','Lokesh785','Lok@0231','Lokesh')
INSERT INTO Users VALUES('Ronny','Ronny@gmail.com','Ronny2451','Ron3654','Ronny')

HTML

<div>
    Search:-
    <asp:TextBox ID="txtSearch" runat="server" Width="200"></asp:TextBox>
</div>
<div>
    <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=txtSearch.ClientID%>").autocomplete("Search_CS.ashx", {
                width: 200,
                formatItem: function (data, i, n, value) {
                    return "<img style = 'width:50px;height:50px' src='PROFILEPHOTOS/" + value.split("-")[1] + "'/> " + value.split("-")[0];
                },
                formatResult: function (data, value) {
                    return value.split("-")[0];
                }
            });
        });
    </script>
</div>

Search_CS.ashx

<%@ WebHandler Language="C#" Class="Search_CS" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

public class Search_CS : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string prefixText = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "SELECT UserName,ImageName FROM Users WHERE UserName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(string.Format("{0}-{1}.jpg{2}", sdr["UserName"], sdr["ImageName"], Environment.NewLine));
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }

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

Screenshot

Adding image to AutoComplete result using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us