My Profile
Gifts
Active Members
TodayLast 7 Days
more...
|
AJAX concept For AutoComplete TextBox
Posted Date: 30 Nov 2005 Resource Type: Articles Category: Web Applications
|
Posted By: vivekthangaswamy Member Level: Gold
Rating:  Points: 10
|
The resource has not been reviewed by Editors yet. Readers are adviced to use their best judgement before accessing this resource.
This resource will be reviewed shortly.
If you think this resource contain inappropriate content, please report to webmaster. |
Introduction
How do I make a request?
Making a HTTP request is very simple. You tell the XML HTTP request object what sort of HTTP request you want to make and which url you want to request. Provide a function to be called when as the request is being made, and finally what, (if any) information you want sent along in the body of the request.
The following script makes a GET request for the relative url "address.txt" (relative to the calling page) It provides the function, which checks the readyState property each time it's called meaning the load is complete, it displays the responseText to the user with an div tag.
In Internet Explorer, you create the object using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP") depending on the version of MSXML installed. In Mozilla and Safari (and likely in future UA's that support it) you use new XMLHttpRequest()
This means that you need to show different script to different browsers, as what works in one, will error in another. The script below does this, and if it's not supported, the variable is set to false to allow for appropriate error messages and recovery with degrading to more normal HTTP transaction methods when the object isn't available. This degradation is important, even in IE the objects can often be blocked by slightly raised security settings (popular due to the commonly exploited holes of course).
var req;
// Function to Initialize
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 to pass the queryString
function SendQuery(Like)
{
Initialize();
var url="http://localhost/Speech/AutoComplete.aspx?Like="+Like;
if(req!=null)
{
req.onreadystatechange = Process;
req.open("GET", url, true);
req.send(null);
}
}
Calling a server-side Script without refreshing the page
Forms are the way to "call" serverside scripts in HTML, they force the page reload, and this is often not very user friendly. Using the HTTP Request, you can call the script without refreshing the page, and still have the form "fallback" to working when the XML HTTP Request Object is not available.
Whilst XML can be used to encode the information you retrieve with the object and it will be available in the responseXML property, however xml is less well supported, some browsers require that the content type of the resource is one of only 2 possible XML mime-types text/xml or application/xml for the property to be populated, and there are always the normal well formness problems you always get with XML
How the Request will Works
// Function to procee the request
function Process()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
if(req.responseText=="")
HideDiv("autocomplete");
else
{
ShowDiv("autocomplete");
document.getElementById("autocomplete").innerHTML =req.responseText;
}
}
else
{
document.getElementById("autocomplete").innerHTML="There was a problem retrieving data:
"+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.address.focus();
}
HOW TO IMPLEMENT IN YOUR WEB PAGE
Create an html page and insert a text box. Then copy all the javascript code in this article and put in the script block of your html page. After that Place a div tag below your text for displaying the auto complete.
<form name="form1">
<input onkeyup="SendQuery(this.value)" name="address" autocomplete="off">
<div class="box" id="autocomplete" style="WIDTH: 250px; BACKGROUND-COLOR: #99cc99" align="left"></div>
</form>
Now the server side code follows. The server side is very simple one. For that also I have given you a reference code.
string Like=Request["Like"];
if(Like!=null && Like.Trim()!="")
{
string sql="select top 10 * from WordList where word like '"+Like.Trim().Replace("'","''")+"%'";
SqlConnection Myconnection=new SqlConnection(ConfigurationSettings.AppSettings["SQLConnString"]);
Myconnection.Open();
DataTable Mydt=new DataTable();
SqlCommand Mycommand=new SqlCommand(sql,Myconnection);
SqlDataAdapter Myadapter=new SqlDataAdapter(Mycommand);
Myadapter.Fill(Mydt);
Myconnection.Close();
foreach(DataRow Myrow in Mydt.Rows)
{
string meaning=Myrow["Meaning"].ToString();
Response.Write(""+Myrow["Word"].ToString()+" "+Myrow["Type"].ToString()+": "+meaning+"
");
}
}
This article will help you to develop or implement AJAX concept in your webapplication easily. Better try this in your application. For more Doubts and clarification contact me.
Reference:
http://www.msdn.com
http://webfx.eae.net
http://www.w3.org
|
Responses
|
| Author: rabih kahaleh 25 Jul 2007 | Member Level: Bronze Points : 0 | i just follow all steps mentioned in the article but javascript error is showing as object expected, any help
| | Author: Thanigaimani.thirumalai 07 Dec 2007 | Member Level: Bronze Points : 0 | Hi
Java script is not calling to my page..whats problem of my page
tel me
|
|