ajax+php 谷歌搜索框自动填充功能实例代码

复制代码代码如下:
<html>
<head>
<script language="javascript"><！--
var http_request;
function update（v）{
if （window.XMLHttpRequest） { // Mozilla, Safari, ...
http_request = new XMLHttpRequest（）;
} else if （window.ActiveXObject） { // IE
http_request = new ActiveXObject（"Microsoft.XMLHTTP"）;
}
http_request.onreadystatechange=out;
var url="tp.phtml？worksheet="+v.value;
http_request.open（"GET",url,true）;
http_request.send（null）;
}
function out（）{
if（http_request.readyState == 4）{
var div=document.getElementById（"out"）;
if（http_request.responseText！=""） {
div.style.display="block";
div.innerHTML=http_request.responseText;
//alert（div.innerHTML）;
}else{
div.style.display="none";
div.innerHTML="";
}
}
}
function end（val）{
document.getElementById（"ws"）.value=val;
document.getElementById（"out"）.innerHTML="";
document.getElementById（"out"）.style.display="none";
}

// --></script>
<style><！--
.test{
display:none;
z-index:100;
width:150px;
top:20px;
left:0px;
height:auto;
background-color:lightgrey;
border:1px solid;
position:absolute;
}
a:link {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:black;
}
--></style>
</head>
<body>
<div style="position:relative;" style="position:relative;">
<input type="txt" id="ws" name="ws" value="" onPropertyChange="update（this）;" oninput="update（this）;"/> <div id="out" class="test"></div>
<div>
<input type="txt" id="d"/>
</body>
</html>

页面一

复制代码代码如下:
<？
include（"include/db.inc"）;
$ws=$_GET["worksheet"];
if（empty（$ws）||strlen（$ws）<3）{
//echo "oo";
exit（）;
}
$db=new db（）;
$str="";
$sql="select * from user where deptID=10 and status="On" and worksheet like "%$ws%" order by worksheet";
$rt=$db->rtAssoc（$sql）;
while（$row=array_shift（$rt））{
$str.="<a href="" href="""#" onclick="end（""
.$row["emp_name"].":".$row["emp_worksheet"].""）;">"
.$row["emp_name"].":".$row["emp_worksheet"]
."</a>,<br/>";
}
$str=substr（$str,0,-6）;
echo trim（$str）;
exit（）;
？>

页面二。

这个东西功能上模仿谷歌，但是效果很不理想。一般简单的应用可以满足

首页 / 脚本样式 / Ajax / ajax+php 谷歌搜索框自动填充功能 实例代码

首页 / 脚本样式 / Ajax / ajax+php 谷歌搜索框自动填充功能实例代码