Sample AJAX Example
See Previous
Page for the example
The Complete JavaScript and HTML File
Code for the complete html file is given below:-
<html>
<head>
<script type="text/JavaScript"><script
type="text/javascript" language="JavaScript1.4">
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHints").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHints").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>
</head>
<body>
<form>
First Name:
<input type="text" id="txtSample"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHints"></span></p>
</body>
</html> |
getHint.asp File
gethint.asp file is called each time a user enters a
character into the text box. Here is the full gethint.asp
file.
<%
dim a(30)
'Fill up array with names
a(1)="Augusty"
a(2)="Binu"
a(3)="Camella"
a(4)="Diana"
a(5)="Eva"
a(6)="Flonor"
a(7)="Gunda"
a(8)="Hegde"
a(9)="Indira"
a(10)="John"
a(11)="Kirty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Peter"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Bindu"
a(19)="Doris"
a(20)="Shimna"
a(21)="Evita"
a(22)="Sunita"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Ebraham"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint
where found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%> |
Make one html file and one asp file and try your luck!
|
