OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

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

2022-2-5 17:00| 发布者: 菜鸟教程小白| 查看: 278| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 应用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(); 
?> 