当输入j后，会触发ajax效果，从后台获取相应的名字中带有j的数据，并展示在suggestions中。
代码实现如下：
实现ajax需要三个文件，一个是html的表单文件，一个是js的核心文件，一个是php的后台文件。
下面的是html文件，当键盘按下时触发showHint方法，在showHint方法中会有ajax的核心内容，实例化，获取地址，获取数据并展示等等。
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
下面是js的内容clienthint.js。
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
//获取xmlHttpObject对象，如果为空，提示浏览器不支持ajax
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
//获取url
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
//回调函数，执行动作
xmlHttp.onreadystatechange=stateChanged
//open
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//将获取的信息插入到txtHint中
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
//获取xml对象
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
下面是php的内容。根据ajax对象传入的参数，获取相应的数据。
<?php
// Fill up array with names
a[]="Anna";a[]="Brittany";
a[]="Cinderella";a[]="Diana";
a[]="Eva";a[]="Fiona";
a[]="Gunda";a[]="Hege";
a[]="Inga";a[]="Johanna";
a[]="Jiqing";a[]="Kitty";
a[]="Linda";a[]="Nina";
a[]="Ophelia";a[]="Petunia";
a[]="Amanda";a[]="Raquel";
a[]="Cindy";a[]="Doris";
a[]="Eve";a[]="Evita";
a[]="Sunniva";a[]="Tove";
a[]="Unni";a[]="Violet";
a[]="Liza";a[]="Elizabeth";
a[]="Ellen";a[]="Wenche";
a[]="Vicky";//gettheqparameterfromURLq=GET["q"];//lookupallhintsfromarrayiflengthofq>0if(strlen(q) > 0)
{
hint="";for(i=0; i<count(a); i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } //Set output to "no suggestion" if no hint were found //or to the correct values if (hint == "")
{
response="no suggestion"; } else { $response=$hint; } //output the response echoresponse;
?>
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/archive/2012/06/27/2565763.html，如需转载请自行联系原作者
