Dear All,
this is search concept
Design :
<script type="text/javascript" src="js/jquery-1.8.0.min.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 = $("
").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>
<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;
}
.style1
{
width: 100%;
}
.style2
{
width: 368px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input type="text" class="search" id="inputSearch" />
Ex: swadesh, ipsita, dharitri
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
<asp:BoundField DataField="username" HeaderText="username"
SortExpression="username" />
<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
<asp:BoundField DataField="media" HeaderText="media" SortExpression="media" />
<asp:BoundField DataField="country" HeaderText="country" SortExpression="country" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PracticeConnectionString %>"
SelectCommand="SELECT [username], [email], [media], [country] FROM [test_auto_complete]">
</form>
</body>
here once enter name like charan automatically display details means:
Response.Write("
<img src='" + media + "' style='width:50px; height:50px; float:left; margin-right:6px;' />"+ username +" " + email + " " + country + " ");
after display click(charan) this automatically will display in details in gridview control please reply me
source code:
public partial class Search : System.Web.UI.Page
{
SqlConnection ora = new SqlConnection("Data Source=Web-PC;Initial Catalog=Practice;Persist Security Info=True;User ID=sa;Password=123");
SqlCommand cmd;
SqlDataReader dr;
protected void Page_Load(object sender, EventArgs e)
{
String q = Request.Params[0];
ora.Open();
cmd = new SqlCommand("select media,username,email,country from test_auto_complete where username like '%" + q + "%' or email like '%" + q + "%'", ora);
try
{
dr = cmd.ExecuteReader();
while (dr.Read())
{
string media = dr.GetValue(0).ToString();
string username = dr.GetValue(1).ToString();
string email = dr.GetValue(2).ToString();
string country = dr.GetValue(3).ToString();
<img src='" + media + "' style='width:50px; height:50px; float:left; margin-right:6px;' />
class='name'>" + username + "
" + email + "
" + country + "
");
Response.Write("
<img src='" + media + "' style='width:50px; height:50px; float:left; margin-right:6px;' />
class='name'>" + username + " " + email + "" + country + "");
}
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
ora.Close();
}
}
Submit an article or tip