<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SearchDB.aspx.cs" Inherits="SearchDB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript" language="javascript">
var XmlHttp = false;
var searchURL = "DBAccess.aspx?searchkey=";

GetXmlHttpRequest();

function GetData(searchKey)
{   
    if (searchKey.length > 0 )
    {
        var requestURL = searchURL + searchKey;
        if (XmlHttp)
        {  
          XmlHttp.open("GET", requestURL, true);
          XmlHttp.onreadystatechange = Callback;
          XmlHttp.send(null);
        }
    }
    else
    {
       var resultsDiv = document.getElementById("DivSearchResults");
       resultsDiv.className ='hide';
    }
}

function Callback()
  {
     if (XmlHttp.readyState == 4)
     {
        if (XmlHttp.status == 200 )
        {
           eval("var res = " + XmlHttp.responseText);
           var resulttext = "";
           
           for(var i=0; i < res.SearchResults.Rows.length; i++)
           {             
              resulttext += res.SearchResults.Rows[i].Value + "<br>";
           }
           if ( resulttext.length > 0 )
           {
              var resultsDiv = document.getElementById("DivSearchResults");
              resultsDiv.className ='show';
              resultsDiv.innerHTML = resulttext;
           }             
        }
       
     }
  }

function GetXmlHttpRequest()
{
  try
  {       
     XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");    
  }
  catch (e)
  {
     GetIEXmlHttpRequest();
  }
}

function GetIEXmlHttpRequest()
{
  try
  {    
     //Internet Explorer
     XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     
  }
  catch (e)
  {
     GetMozillaXmlHttpRequest();
  }
}

function GetMozillaXmlHttpRequest()
{
   try
     {
        //Mozilla browsers
        XmlHttp  = new XmlHttpRequest();
     }
     catch(ex)
     {
        alert("Failed to get XmlHttpRequest");
        XmlHttp = false;
     }
}
</script>

<head runat="server">
    <title>Search database using XmlHttpRequest</title>
    <style type="text/css">
    .hide
    {
       display:none;
    }    
    .show
    {
      display:block;  
      width:255px    
    }
    #DivSearchResults
    {
      background-color:skyblue;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Search database for most innovative companies">
            </asp:Label>
            <br />
            <input type="text" id="keyword" autocomplete="off" onkeyup="GetData(this.value);"
                style="width: 250px"/>
        </div>
        <div id="DivSearchResults">
        </div>
    </form>
</body>
</html>
