Autosuggest Using XMLHttpRequest in ASP.NET

In this post, I will show you how to implement autosuggest using XmlHttpRequest in asp.net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoSuggest.aspx.cs" Inherits="AutoSuggest" %>  
  
<!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">  
<head runat="server">  
 <title>Untitled Page</title>  
  
 <script type="text/javascript">  
var req;  
  
function Initialize()  
{  
 try  
 {  
     req=new ActiveXObject("Msxml2.XMLHTTP");  
 }  
 catch(e)  
 {  
     try  
     {  
         req=new ActiveXObject("Microsoft.XMLHTTP");  
     }  
     catch(oc)  
     {  
         req=null;  
     }  
 }  
  
 if(!req && typeof XMLHttpRequest!="undefined")  
 {  
     req= new  XMLHttpRequest();  
  
}  
  
} function SendQuery(key)  
 {  
 Initialize();  
 var url="http://localhost/MyPractice/AutoSuggest.aspx?k="+key;  
 //debugger;  
 if(req!=null)  
 {  
     req.onreadystatechange = Process;  
     req.open("GET", url, true);  
     req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
  
     req.send(null);  
  
 }  
  
}  
  
function Process()  
{  
 if (req.readyState == 4)  
     {  
     // only if "OK"  
         if (req.status == 200)  
         {  
             if(req.responseText=="")  
                 HideDiv("autocomplete");  
             else  
             {  
                 ShowDiv("autocomplete");  
                 var result=req.responseText;  
                document.getElementById("autocomplete").innerHTML =result;  
  
  
  
             }  
         }  
         else  
         {  
             document.getElementById("autocomplete").innerHTML=  
                 "There was a problem retrieving data:<br>"+req.statusText;  
         }  
     }  
}  
  
function ShowDiv(divid)  
{  
if (document.layers) document.layers[divid].visibility="show";  
else document.getElementById(divid).style.visibility="visible";  
}  
  
function HideDiv(divid)  
{  
if (document.layers) document.layers[divid].visibility="hide";  
else document.getElementById(divid).style.visibility="hidden";  
}  
  
function BodyLoad()  
{  
 HideDiv("autocomplete");  
 document.form1.keyword.focus();  
  
}  
 </script>  
  
</head>  
<body onload="BodyLoad();">  
 <form name="form1">  
     <input name="keyword" onkeyup="SendQuery(this.value)" style="width: 500px" autocomplete="off">  
     <div align="left" class="box" id="autocomplete" style="width: 500px; background-color: #ccccff">  
     </div>  
  
 </form>  
</body>  
</html>  

using System;  
using System.Data;  
using System.Configuration;  
using System.Collections;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
using System.Data.SqlClient;  

public partial class AutoSuggest : System.Web.UI.Page  
{  
 public void Page_Load(object sender, EventArgs args)  
 {  
     string keyword = Request["k"];  
     if (keyword != null && keyword.Trim() != "")  
     {  
         string sql = "select top 10* from customers where companyname like '" + keyword.Trim().Replace("'", "''") + "%'";  
         SqlConnection conn = new SqlConnection("server=(local);database=northwind;uid=sa;pwd=12345");  
         conn.Open();  
         DataTable dt = new DataTable();  
         SqlCommand command = new SqlCommand(sql, conn);  
         SqlDataAdapter adapter = new SqlDataAdapter(command);  
         adapter.Fill(dt);  
         conn.Close();  

         foreach (DataRow row in dt.Rows)  
         {  
             string meaning = row["Customerid"].ToString();  
             Response.Write("<html><body><table><tr><td>");  
             Response.Write("<strong>" + row["companyname"].ToString() + "</strong> <i>");  
             Response.Write(row["contactname"].ToString() + "</i>: " + meaning + "<br>");  
             Response.Write("</td></tr></body></html></table>");  
         }  
     }  


 }  

}  

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru