Introduction:
In this article I will explain how to display images with auto complete search in asp.net using JQuery.
Demo:
Download sample code attached
In this article I will explain how to display images with auto complete search in asp.net using JQuery.
Description:
In previous posts I explained many articles relating to JQuery. Now I will explain another article relating to JQuery. If we search for user in facebook we will get user name with image. After seen that search I decided to write a post to implement auto complete search with images in asp.net.
To implement this concept first we need to design table in database to save user and image details in database.In previous posts I explained many articles relating to JQuery. Now I will explain another article relating to JQuery. If we search for user in facebook we will get user name with image. After seen that search I decided to write a post to implement auto complete search with images in asp.net.
Column Name
|
Data Type
|
Allow Nulls
|
UserId
|
int(set identity property=true)
|
No
|
UserName
|
varchar(50)
|
Yes
|
ImageName
|
nvarchar(max)
|
Yes
|
After completion table design I am using previous post save images in folder and images path in database using asp.net to save user and image details in database. After insertion of user details in database that data would be like this
 |
Now create new website using visual studio and Right click on your website >> select Add New Item >> Select Generic Handler and give name as Search.ashx (Here I am using this name to connect with JQuery. If you want different name then change it in your aspx page also). After that write the following code in generic handler file (Search.ashx)
C# Code
<%@ WebHandler Language="C#" Class="Search" %>
using System;
using System.Data.SqlClient;
using System.Text;
using System.Web;
public class Search : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
string searchText = context.Request.QueryString["q"];
SqlConnection con = new SqlConnection("Data Source=SureshDasari; Integrated Security=true; Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select UserId,UserName,ImageName from UserImageDetails where UserName Like @Search + '%'", con);
cmd.Parameters.AddWithValue("@Search",searchText);
StringBuilder sb = new StringBuilder();
using(SqlDataReader dr=cmd.ExecuteReader())
{
while(dr.Read())
{
sb.Append(string.Format("{0},{1}{2}",dr["UserName"],dr["ImageName"],Environment.NewLine));
}
}
con.Close();
context.Response.Write(sb.ToString());
}
public bool IsReusable
{
get
{
return false;
}
}
}
|
If you observe above code this http handler accepts request from JQuery in a Query string parameter “q”. By passing query string parameter as search text and get user details based on that search text.
VB.NET Code
<%@ WebHandler Language="VB" Class="Search" %>
Imports System.Data.SqlClient
Imports System.Text
Imports System.Web
Public Class Search
Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim searchText As String = context.Request.QueryString("q")
Dim con As New SqlConnection("Data Source=SureshDasari; Integrated Security=true; Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select UserId,UserName,ImageName from UserImageDetails where UserName Like @Search + '%'", con)
cmd.Parameters.AddWithValue("@Search", searchText)
Dim sb As New StringBuilder()
Using dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
sb.Append(String.Format("{0},{1}{2}", dr("UserName"), dr("ImageName"), Environment.NewLine))
End While
End Using
con.Close()
context.Response.Write(sb.ToString())
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
|
After completion of write code in HttpHandler add following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx", {
width: 200,
formatItem: function(data, i, n, value) {
return "<img style = 'width:50px;height:50px' src= Images/" + value.split(",")[1] + "'/> " + value.split(",")[0];
},
formatResult: function(data, value) {
return value.split(",")[0];
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" Width = "195"></asp:TextBox>
</div>
</form>
</body>
</html>
|
If you observe above code in header section I added some of script and css files by using those files we have a chance to display auto complete text with images. To get those files download attached sample code and use it in your application.
Another thing here we need to know is script function in header section
$("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx",
|
Here I given textbox control id and path of handler by using these details we will display auto complete with images for particular textbox.
Now run your application check the output that would be like this
Demo:
 | |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
22 comments :
thanks Suuresh I am waiting for this code
Thanks Thanks Thanks ..................
Smart one....
soopar mama.....
Dear Sir
i am facing some problem JQuery AutoComplete Image Search(my image not display but name is display)
i hope that problem because of your not giving correct Images folder path whether your application contains Images or not .If you observe this line in header section img style = 'width:50px;height:50px' src= Images/" + value.split(",")[1] + "'
Here i given src path from Images folder please check it once whether you given images path correctly or not.
ok sir,but iwant retrive the image from the database binary format
please help me sir
How to add chat window in my webpage using asp.net with c#??? plz help me......
i have some problem for this code
error message is: "Microsoft JScript runtime error: 'null' is null or not an object"
give me solution... plz... mail on : ketan_coolboy@ymail.com
THANK U BRO..
thanks sir to provide smart search but i want to display image or name to link(hyperlink or linkbutton) provide by any on (name or image) is it possible please give reply me sir...i am waiting.......
Hi i also want add chat system in my website....plz help me...i search a lot but i didnt get any result.so plz help me.
u can also send me any reference on my email : bharatgunjal2010@gmail.com
thnks in advance.
Hi suresh, code is very useful. but i facing one problem. i want retrieve user id also for print on label. how is it possible..
Thanks in Advance
Abhay Jha
Mr. Suresh ... Please ...
At the first: thanks so much for this useful code and project
now .. when I search for any name in the database then select the specific name ... this name will appear in the "txtSearch" ... right?
OK now now I created another textbox called "TextBox1" and I need when I choose the specific name at txtSearch ... then TextBox1 will appear the image page which is related to txtSearch ... so when I select name in txtSearh the image name will appear in TextBox1 ...
please help me ... I tried to modify scrip tag but I can't ...
hi Suresh,
first of all thanks for this useful code.
But i am using this functionality on a page which has a master page in asp.net c#. in case of master page, it is not working. please provide me a solution to work on pages which has master page.
please give me reply soon
Hi suresh, code is very useful. but i facing one problem. i want retrieve user id and store in hidden field. how is it possible..
Please reply asap.
Thanks in Advance
udham singh
@udham singh...
Check this article http://www.aspdotnet-suresh.com/2012/08/how-to-get-selected-value-from-jquery.html
In this same code how should i get userid pls help me and i checked the above article using webmethod but i dont want that ......in the handler page itself how to get userid ......thanks in advance
thank you
Hi Suresh sir...
You are my problem solving dictionary....
raju m tukadiya hello sir .... i create same as facebook but how to open notification windwn message windown plzzzzz plz give me coad this software releatend
image was show but not visible it show cross sign
image are show cross sign