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