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
= "";
}