TextSearch With Overlay Screen

Rate It (1) Thank you for your feedback!

I create a code for overlay and TextSeach(ajax)

Follow these Steps:->

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 :

<title>Untitled Page</title>

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>

.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>

<div >

<p>

plz click the button to fill the gridview

<tr>

</td>

</td>

</td>

</td>

<%--<asp:ImageButton ID="ImageButton1" Height="20px" ImageUrl="~/close_icon.gif"

OnClientClick="close()" />--%>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<strong style="color: orange">First Name</strong></td>

</td>

<%--<select id="ListBox1" runat="server" style="display: none; width: 153px;" onchange="dis()"

enableviewstate="false">

<option>Please Select</option>

</select>--%></td>

<div >

 </div>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<strong style="color: orange">Location</strong></td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

<asp:GridView ID="GridView2" runat="server">

</asp:GridView>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

<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>

</td>

</tr>

</table>

 <br />

<%--<asp:TextBox ID="txtsearch" onkeyup="showHint()" runat="server" ></asp:TextBox>--%>

</div>

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

}

Revision number 1, Monday, August 09, 2010 5:22:56 PM by miya2008

Revision History
Article Updates
Comments

Comments

You must Login to comment.

Wed, Jun 22, 2011 5:35 AM by hassansajedi	hello i've need to this project for my webForm, please attach this code in a sample project. thank you. hassan.

Shortcuts

Top Wiki Contributors

(last 30 days)

abiruban (1)

TextSearch With Overlay Screen

Comments

Shortcuts

Table of Contents

Top Wiki Contributors

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft

FRAMEWORKS

TECHNOLOGIES

CURRENT RELEASES

TextSearch With Overlay Screen

Comments

Shortcuts

Table of Contents

Top Wiki Contributors

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft