TextSearch With Overlay Screen(AJAX)

In this article you will learn how to use TextSearch With Overlay Screen(AJAX).


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 >

                            &nbsp;</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>

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