Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Auto Complete textbox with Images in asp.net

Feb 22, 2012
Introduction:

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.

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:


Download sample code attached

 

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 RSS subscribe by email Subscribe by Email

39 comments :

Anonymous said...

thanks Suuresh I am waiting for this code
Thanks Thanks Thanks ..................

Sam said...

Smart one....

sami said...

soopar mama.....

Anonymous said...

Dear Sir
i am facing some problem JQuery AutoComplete Image Search(my image not display but name is display)

Suresh Dasari said...

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.

Mohan Krishna said...

ok sir,but iwant retrive the image from the database binary format


please help me sir

Priya said...

How to add chat window in my webpage using asp.net with c#??? plz help me......

ketan said...

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

Anonymous said...

THANK U BRO..

rajesh said...

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.......

Bharat Gunjal said...

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.

Abhay Jha said...

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

Redeco box said...

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 ...

Hemant Sharma said...

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

udham Singh said...

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

Suresh Dasari said...

@udham singh...
Check this article http://www.aspdotnet-suresh.com/2012/08/how-to-get-selected-value-from-jquery.html

Anonymous said...

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

pet study said...

thank you

Naresh Battul said...

Hi Suresh sir...
You are my problem solving dictionary....

RAJU TUKADIYA said...

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

D.K. THEBOSS said...

image was show but not visible it show cross sign

D.K. THEBOSS said...

image are show cross sign

Sathish Ramamurthi said...

image are show cross sign SAME Errror for me .Clear tis Suresh

Sukanta said...

but how do we use that search in master page

Sukanta said...

actually i am using a search textbox in master page.so i want to display name with image on search. above code running correct in simple aspx page but in master page.
can any one give me solutions for it.

thanks

Anonymous said...

img style = 'width:50px;height:50px' src= 'photo/" + value.split(",")[1]

apply img this code.Then image will appear......
a small colon(') missed in that code.

RAJAT MAHAJAN said...

sir this code gives error that " COULD NOT CREATE TYPE AUTOCOMPLETE " plz solve this error sir . i am stuck on this

Atul Kumar Shaw said...

Nce Sir Ji.......

Aamir Pervez said...

Sir
i am facing some problem JQuery AutoComplete Image Search(my image not display but name is display), even i have written the correct name of images folder...

SHAIK RAFFI said...

Hi Suresh
Replace this Line . Because we didnt get image from Folder Path You Missed the Colon(,) after (src)

Hi all Use Below code

img style = 'width:50px;height:50px' src= 'Images/"

Ajith Achuthan said...

Dear Sir, Why you used Generic Handler for this....???

abhimanyu kumar said...

Auto Complete in comboBox like www.erail.in in window base application .plz help me .
Thanks

hardik Bhavsar said...

when you click on selected search text then how to redierect on another page using this code.

Anonymous said...

This is awesome. I want to know that after showing suggestions in the list if user clicks on ""SureshDasari" How will it open Suresh Dasari's profile?

aman said...

to display image...
replace this code src= Images/" + value.split(",")[1] + "'/>
by this src= '" + value.split(",")[1] + "'/>

aman said...

nice article sir...but if entered value in textbox ,doesn't match with database then show "Record does not found". i have tried whole day but i could not ......sir plzz help me......it's urgennt...
nothing is working inside he handler...

Diego Cardenas said...

thanks for the help :) it worked :D :D :D

vcecseb said...

My images are stored in binary format ,then how can i retrieve images in textbox

Dibakar DebRoy said...

It is working fine in simple aspx page but how to work it in Master Pages..please reponse if any solution

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.