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();

  ?>

  页面二。

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