简单实现搜索提示

来源[http://www.woyuw.cn]
ser.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<script type="text/javascript" src="yu_serach.js" language="javascript"></script>
<style>
#serach_div
{
argin-left:auto;
margin-right:auto;
margin-left:auto;
border: 1px solid #C6DFF7;
width:400px;
margin-top:10px;
background-color:#FFF;
}
.s_input {
font-size: 12px;
text-decoration: none;
border: 0px solid #C6DFF7;
margin: 1px;
padding: 1px;
height:20px;
width:375px;
}
.serach_img
{
border: 0px solid #C6DFF7;
border-right: 0px solid #C6DFF7;
width:16px;
}
#serach_mes
{
border: 1px solid #C6DFF7;
text-align:left;
background-color:#ffffff;
z-index:12;position:absolute;
border-top: 0px solid #C6DFF7; 
width:400px; 
display:none;
height:30px;
height:auto!important;
font-size:12px;
}
</style><body>
<div   id="serach_div" style="height:28px;">
     <input value=""  class="s_input"  id="svalue"   type="text">
     <span  class="serach_img">
       <img src="http://www.woyuw.cn/images/serach_ico.gif"   >
     </span>
</div>
<div  style="" id="serach_mes">
</div>
</body>
yu_search.js
function getHTTPObject()       
    {                       
          var http;
          var browser = navigator.appName;
          if(browser == "Microsoft Internet Explorer") 
          {
                
                http = new ActiveXObject("Microsoft.XMLHTTP"); 
          }
          else
          {
                 
                http = new XMLHttpRequest(); 
          }
          return http;
    }
function _open_serach()
{   
var Object=document.getElementById('serach_div');
var ParentHeight=Object.style.height; 
    var   x   =   Object.offsetLeft;
    var   y   =    Object.offsetTop;   
    while(Object=Object.offsetParent) 
    { 
       x   +=   Object.offsetLeft;   
       y   +=   Object.offsetTop;
    } // var ParentHeight=document.getElementById('serach_div').style.height;
    
  var obj=document.getElementById('serach_mes');
     var top=parseInt(y)+parseInt(ParentHeight);
      var browser = navigator.appName;
          if(browser == "Microsoft Internet Explorer") 
          {
           //var obj =event.srcElement;
             obj.style.left=x+'px';
          }
    else
    {
      obj.style.left=x+'px';
    }
      obj.style.top=top+2+'px';
         obj.style.display='block';
         var svalue=document.getElementById('svalue').value;
         svalue=svalue.replace(/^\s+/g,"");
         if(svalue=="" ||obj.innerHTML=="" )
         {
           obj.innerHTML = '<font color="#999999">欢迎您使用</font>'; 
         }
  }function _close_serach()
{   
var obj=document.getElementById('serach_mes');
     obj.style.display='none';}
function _serach_value()
{   
  var show=document.getElementById('serach_mes');    var svalue=  document.getElementById('svalue').value;  
    
     svalue=svalue.replace(/^\s+/g,"");
    svalue_len=svalue.replace(/[^\x00-\xff]/g,"**").length;    if(svalue_len==0 || svalue=="")
    {
     show.style.display='none';
    }
    else
    {
    var    url="/serach.php?svalue="+escape(svalue); 
    var ajax = getHTTPObject();
     ajax.open("GET", url, true); 
     ajax.onreadystatechange = function() 
      
     {   
       if(ajax.readyState==1)
      {  
       
     
       
     }
     
     if (ajax.readyState == 4 && ajax.status == 200) 
       
      {    _open_serach();
        show.innerHTML = ajax.responseText; 
        
       
      } 
      }
          ajax.send(null); 
    }
}document.onmousedown=function(e)
{  
  var browser = navigator.appName;
          if(browser == "Microsoft Internet Explorer") 
          {
           var obj =event.srcElement;
          }
          else
          {
          
       var fireEven = window.event || e;
       var obj=fireEven.target;
                      }
    if(obj.id!=='serach_ico_id' && obj.id!=='serach_mes')
  {
    _close_serach();
  }
    
}search.php
复制PHP内容到剪贴板PHP代码:<?php
header("Cache-Control: no-cache, must-revalidate"); 
$bgtime=microtime(true);
if(strlen(str_replace("","",$_GET['svalue']))==0)
{
  echo strlen(str_replace("","",$_GET['svalue']));
}
else {
  @$sql=mysql_connect('localhost','root','xxxxxx'); //链接数据库
      
@mysql_select_db('test');
   
$sql="select * from test where   LOWER(title) like  LOWER('%".js_unescape($_GET['svalue'])."%')   limit 10 ";  $query=mysql_query($sql);
  $num=mysql_num_rows($query);
  while($row=mysql_fetch_array($query))
  {
   echo $row['title'].'<br>';
  }
  if($num>=1)
  {
  $endtime=microtime(true);
  $worktime=$endtime-$bgtime;
echo '<br><font color="#999999">本次搜索共花费'.$worktime.' 秒</font>';
  }
}
/*
  对JS 中的 escape 进行转码
*/
function js_unescape($str)
{
        $ret = '';
        $len = strlen($str);
        for ($i = 0; $i < $len; $i++)
        {
                if ($str[$i] == '%' && $str[$i+1] == 'u')
                {
                        $val = hexdec(substr($str, $i+2, 4));
                        if ($val < 0x7f) $ret .= chr($val);
                        else if($val < 0x800) $ret .= chr(0xc0|($val>>6)).chr(0x80|($val&0x3f));
                        else $ret .= chr(0xe0|($val>>12)).chr(0x80|(($val>>6)&0x3f)).chr(0x80|($val&0x3f));
                        $i += 5;
                }
                else if ($str[$i] == '%')
                {
                        $ret .= urldecode(substr($str, $i, 3));
                        $i += 2;
                }
                else $ret .= $str[$i];
        }
        return $ret;
}
?>