I create a code for overlay and TextSeach(ajax)
Step 1:-> In .aspx page:
First create two Textbox in HTML( txtsearch,txtlname (In my case) ) and a ListBox(ListBox1)
Write the Following Code in Head :
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script
language="JavaScript"
type="text/javascript">
var
xmlHttp;
var
arr;
function
showHint()
{
document.getElementById("ListBox1").style.display='';
xmlHttp=GetXmlHttpObject()
var url="Default2.aspx";
url=url+"?name="+document.getElementById('txtsearch').value;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
return false;
}
function
stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var str;
str =
xmlHttp.responseText;
if(str=="")
{
document.getElementById("ListBox1").style.display='none';
}
else
{
arr=str.split(",");
var i;
for(i=0;i<arr.length;i++)
{
// dd2= document.getElementById("ListBox1");
//
// var theOption = new Option;
// theOption.text = arr[i];
// theOption.value = arr[i];
// dd2.options[i] = theOption;
document.getElementById("ListBox1").value=arr[i];
//document.getElementById('txtsearch').value=arr[i];
}
} }
}
function
GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new
XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
function close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
function dis()
{
document.getElementById("txtsearch").value=document.getElementById("ListBox1").value;
document.getElementById("ListBox1").style.display='none';
}
//window.onload
= fillDropDown();
</script>
<style
type="text/css">
.black_show{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.90;
filter: alpha(opacity=80);
}
.white_show {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
-webkit-border-radius:20px;
border: 16px
solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
.txtname
{
border: 5px
solid orange;
}
</style>
</head>
And the following Code in Body:-
<body>
<form id="form1" runat="server">
<div >
<p>
plz click the button to fill the gridview <input id="Button1" type="button" value="Search" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" /></p>
<div id="light" class="white_show" style="width: 47%; left: 25%; top: 25%; height46%;">
<table style="width: 100%; height: 68px">
<tr>
<td style="width: 126px; height: 32px">
</td>
<td style="width: 126px; height: 32px">
</td>
<td style="width: 146px; height: 32px">
</td>
<td style="width: 146px; height: 32px">
</td>
<td style="width: 100px; height: 32px; text-align: right" valign="top">
<%--<asp:ImageButton ID="ImageButton1" Height="20px" ImageUrl="~/close_icon.gif"
OnClientClick="close()" />--%>
<img id="Img1" src="close_icon.gif" runat="server" onclick= "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"/>
</td>
</tr>
<tr>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 100px; height: 2px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 100px; height: 2px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 100px; height: 2px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 126px; height: 2px; text-align: center">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 146px; height: 2px">
</td>
<td style="width: 100px; height: 2px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 16px; text-align: center;" valign="top">
<strong style="color: orange">First Name</strong></td>
<td style="width: 126px; height: 16px; text-align: center" valign="top">
</td>
<td style="width: 146px; height: 16px" valign="top"><input id="txtsearch" onkeyup="showHint()" onblur="dis()" runat="server" type="text" style="width: 215px" />
<input type="text" id="ListBox1" runat="server" style="display: none; width: 214px;" onclick="dis()" />
<%--<select id="ListBox1" runat="server" style="display: none; width: 153px;" onchange="dis()"
enableviewstate="false">
<option>Please Select</option>
</select>--%></td>
<td id="tdname"
style="width:
146px; height:
16px" valign="top">
<div >
</div>
</td>
<td style="width: 100px; height: 16px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 16px; text-align: center" valign="top">
</td>
<td style="width: 126px; height: 16px; text-align: center" valign="top">
</td>
<td style="width: 146px; height: 16px" valign="top">
</td>
<td style="width: 146px; height: 16px" valign="top">
</td>
<td style="width: 100px; height: 16px" valign="top">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center" valign="top">
<strong style="color: orange">Location</strong></td>
<td style="width: 126px; height: 23px; text-align: center" valign="top">
</td>
<td style="width: 146px; height: 23px" valign="top">
<input id="txtlname" runat="server" type="text" style="width: 214px" /></td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 146px; height: 23px">
<asp:GridView ID="GridView2" runat="server">
</asp:GridView>
</td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td
style="width:
146px; height:
23px">
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
<tr>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 126px; height: 23px; text-align: center">
</td>
<td style="width: 146px; height: 23px" valign="top">
<asp:Button ID="Submitbttn" runat="server" Text="Submit" OnClick="Submitbttn_Click" BackColor="Orange" BorderColor="White" BorderStyle="Outset" Font-Bold="True" ForeColor="White" />
<asp:Button ID="Closebttn" runat="server" Text="Close" BackColor="Orange" BorderColor="White" BorderStyle="Outset" Font-Bold="True" ForeColor="White" Width="64px" /></td>
<td style="width: 146px; height: 23px">
</td>
<td style="width: 100px; height: 23px">
</td>
</tr>
</table>
<br />
<%--<asp:TextBox ID="txtsearch" onkeyup="showHint()" runat="server" ></asp:TextBox>--%>
</div>
<div id="fade" class="black_show">
gdfggfhfghd</div>
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</div>
</form>
</body>
Step 2:- In .cs page:
Write the following code:-
protected void
Page_Load(object sender,
EventArgs e)
{
string str1 = "";
if (Request.QueryString["name"]
== "")
{
Response.Clear();
Response.End();
}
else if (Request.QueryString["name"] != null)
{
Response.Clear();
string name = Request.QueryString["name"].ToString();
int len = name.Length;
ListBox1.Visible = true;
for (int i = 0;
i <= len; i++)
{
string c = name.Substring(i,
len);
string str =
"";
str +=
c;
SqlConnection conn1 = new
SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());
SqlCommand cmd1 = new SqlCommand("select
DISTINCT fname from testseach where fname like '" + str
+
"%'", conn1);
conn1.Open();
SqlDataReader dr;
if (txtsearch.Value !=
null)
{
dr = cmd1.ExecuteReader();
int a = 0;
while (dr.Read())
{
if (str1 ==
"")
{
str1 = dr["fname"].ToString();
}
else
{
str1 += "," +
dr["fname"].ToString();
}
a = a + 1;
}
GridView2.DataSource = dr;
GridView2.DataBind();
dr.Close();
conn1.Close();
//else
//{
// ListBox1.Items.Clear();
//}
//str1.Remove(len-1,2);
Response.Write(str1);
Response.End();
}
}
}
}
protected void
ListBox1_SelectedIndexChanged(object sender,
EventArgs e)
{
//txtsearch.Value = ListBox1.SelectedItem.Text;
}
protected void
Submitbttn_Click(object sender,
EventArgs e)
{
SqlConnection
conn1 = new
SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());
conn1.Open();
SqlCommand
cmd1 = new SqlCommand("select
* from testseach where fname='" + txtsearch.Value +
"' or lname='" + txtlname.Value +
"'", conn1);
SqlDataReader
dr1;
dr1 =
cmd1.ExecuteReader();
GridView1.DataSource = dr1;
GridView1.DataBind();
conn1.Close();
txtsearch.Value = "";
txtlname.Value
= "";
}

Mukesh Kumar TiwariPosted Sep 12, 2013, 8:05 AM
Mahak jee..A very nice demo,with gud explanations .keep it up..thanks