In this post I will explain how to search with image like
google or facebook in asp.net using JQuery.
Description:-
For this we have take one textbox on design page and create database
table in which some dummy data along with image. I have Jquery for search with
image in this example. It’s better to be taking a practical look.
First create a table
in Sql server .
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[country_image](
[country_name]
[varchar](max) NOT NULL,
[country_image]
[varchar](max) NOT NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
After that create Search.ashx file (this is web handler
file).
Search.ashx:-
<%@
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["s"];
SqlConnection con = new SqlConnection("Data
Source=SUSHIL-PC;Initial Catalog=modi;Integrated Security=true");
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select country_name,country_image from
country_image";
//cmd.Parameters.AddWithValue("@Search1", searchText);
StringBuilder sb = new StringBuilder();
cmd.Connection = con;
con.Open();
using (SqlDataReader dr =
cmd.ExecuteReader())
{
while (dr.Read())
{
sb.Append(string.Format("{0},{1}{2}",
dr["country_name"],dr[1], Environment.NewLine));
}
}
con.Close();
context.Response.Write(sb.ToString());
}
public
bool IsReusable {
get {
return false;
}
}
}
Design a page like this :-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/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 () {
$("#<%=txt_search.ClientID%>").autocomplete("Search.ashx", {
width: 280,
formatItem: function (data, i, n, value) {
return "<img style
= 'width:25px;height:20px' src='" + 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="txt_search" runat="server" Height="20px" Width="275px" Font-Names="roboto" ForeColor="Silver"></asp:TextBox>
</div>
</form>
</body>
</html>
OutPut :-
No comments:
Post a Comment
Note: only a member of this blog may post a comment.