Description:-
In this example we
explain that how to create Facebook type search box with auto complete using
jquery,ajax in asp.net.here we explain that Facebook style autocomplete textbox
search using jquery and ajax in asp.net.
Previous time we already explain that autocomplete textbox search in asp.net and also in mvc application and webservices. But to display something fancy search box facility same like facebook when we search our friend then it's related information are displayed in box with his photo. Today all user like this type of fancy and good looking facility in your website.
Previous time we already explain that autocomplete textbox search in asp.net and also in mvc application and webservices. But to display something fancy search box facility same like facebook when we search our friend then it's related information are displayed in box with his photo. Today all user like this type of fancy and good looking facility in your website.
How to Bind Excelsheet Data to Gridview CRUD operation in Excelsheet Database
So here is a code that demostrate how to create facebook style search in asp.net
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Facebook
Style Search facility with Box in asp.net </title>
<style type="text/css">
body
{
font-family:
'lucida grande' ,
tahoma, verdana,
arial, sans-serif;
}
.contentArea
{
width:
600px;
margin:
0 auto;
}
#inputSearch
{
width:
350px;
border:
solid 1px #000;
padding:
3px;
}
#divResult
{
position:
absolute;
width:
350px;
display:
none;
margin-top:
-1px;
border:
solid 1px #dedede;
border-top:
0px;
overflow:
hidden;
border-bottom-right-radius:
6px;
border-bottom-left-radius:
6px;
-moz-border-bottom-right-radius:
6px;
-moz-border-bottom-left-radius:
6px;
box-shadow:
0px 0px 5px #999;
border-width:
3px 1px 1px;
border-style:
solid;
border-color:
#333 #DEDEDE #DEDEDE;
background-color:
white;
}
.display_box
{
padding:
4px;
border-top:
solid 1px #dedede;
font-size:
12px;
height:
50px;
}
.display_box:hover
{
background:
#3bb998;
color:
#FFFFFF;
cursor:
pointer;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function
() {
$(".search").keyup(function () {
var
inputSearch = $(this).val();
var
dataString = 'searchword=' + inputSearch;
if
(inputSearch != '') {
$.ajax({
type: "POST",
url: "Search.aspx",
data: dataString,
cache: false,
success: function (html) {
$("#divResult").html(html).show();
}
});
} return
false;
});
jQuery("#divResult").live("click", function
(e) {
var
$clicked = $(e.target);
var
$name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).live("click", function
(e) {
var
$clicked = $(e.target);
if
(!$clicked.hasClass("search")) {
jQuery("#divResult").fadeOut();
}
});
$('#inputSearch').click(function () {
jQuery("#divResult").fadeIn();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width:15%; height:100%";>
<legend><b>Facebook type
Search Facility</b> </legend>
<h3 style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold; color: #FF0000">
Developed and Designed by
aspsolutionkirit.blogspot.in</h3>
<div class="contentArea">
<input type="text" class="search" id="inputSearch" />
<b>Ex: kirit, k,</b> <br />
<div id="divResult">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Search.aspx.cs:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
public partial class Search : System.Web.UI.Page
{
string
connStr = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString;
protected void Page_Load(object
sender, EventArgs e)
{
SqlConnection
con = new SqlConnection(connStr);
String
req = Request.Params[0];
con.Open();
SqlCommand
cmd = new SqlCommand("select photo,unm,email,country from Users where unm
like '%" + req + "%' or email like
'%" + req + "%'",
con);
try
{
SqlDataReader
dr = cmd.ExecuteReader();
while
(dr.Read())
{
string
photo = dr.GetValue(0).ToString();
string
unm = dr.GetValue(1).ToString();
string
email = dr.GetValue(2).ToString();
string
country = dr.GetValue(3).ToString();
Response.Write("<div class='display_box' align='left'><img
src='" + photo + "'
style='width:50px; height:50px; float:left; margin-right:6px;' /><span
class='name'>" + unm + "</span> <br/>"
+ email + "<br/><span
style='font-size:9px; color:#999999'>" + country + "</span></div>");
}
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
con.Close();
}
}
thanks. also visit blog for updated post.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks nice post,
ReplyDeleteWith the help of this code i have developed this in Asp.net MVC , if any one need this in MVC , mail me on syednasirblog@gmail.com
thanks for comment.
Delete