ajax之搜索提示

數據庫表： 復制內容到剪貼板
代碼:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`hits` INT NOT NULL DEFAULT 0,
PRIMARY KEY ( `id` )
) ENGINE = InnoDB

insert into suggest(title,hits)values(xqbar.com,100);
insert into suggest(title,hits)values(www.xqbar.com,410);
insert into suggest(title,hits)values(http://xqbar.com,700);
insert into suggest(title,hits)values(mail:xqbar.com,200);
insert into suggest(title,hits)values(ftp:xqbar.com,100);
insert into suggest(title,hits)values(http://www.xqbar.com,70)search.php
(關於php我也是接觸不久，下面的php如果羅嗦還望高手指點)
返回的信息字符串要為 xxx1|xxx2$200|100 前後對應 復制內容到剪貼板
代碼:

<?php
if($_GET["action"]!=){
   #獲取用戶輸入的關鍵字
   $keyword=$_GET["keyword"];
   #過濾關鍵字
   $keyword=str_replace("[","[[]",$keyword);
   $keyword=str_replace("&","[&]",$keyword);
   $keyword=str_replace("%","[%]",$keyword);
   $keyword=str_replace("^","[^]",$keyword);
   #鏈接數據庫
   $conn=mysql_connect("localhost","xqbar","xqbaradmin");
   #選擇數據庫
   @mysql_select_db("xqbar") or die(sorry);
   mysql_query(set names utf-8);
   #查詢語句
   $sql="select title,hits from suggest where title like %".$keyword."% order by hits desc limit 10";
   $result=mysql_query($sql);
   #循環得到查詢結果，返回字符串
   #格式為 結果1|結果2$結果1點擊次數|結果2點擊次數
   if($result){
   $i=1;$title=;$hits=;
   while($row=mysql_fetch_array($result,MYSQL_BOTH))
   {
     $title=$title.$row[title];
   $hits=$hits.$row[hits];
   if($i<mysql_num_rows($result))
  {
   $title=$title."|";
   $hits=$hits."|";
  }
  $i++;
    }
   }
   mysql_close();
}
?>
<?php echo $title.$.$hits;?>js代碼 復制內容到剪貼板
代碼:

引入prototye.js有朋友說這個庫太大，或者把，不習慣的朋友可以使用jquery.js框架或者直接創建ajax對象，這個我就不想說了，這裡直接引用prototye.js框架
<script type="text/javascript" src="prototype.js"></script>
創建層和顯示查詢結果的js代碼
<script type="text/javascript">
//定義變量lastindex 表示為鼠標在查詢結果上滑動所在位置，初始為-1
var lastindex=-1;
//定義變量flag 表示是否根據用戶輸入的關鍵字進行ajax查詢,flase為允許查詢 true為禁止查詢
var flag=false;
//返回的查詢結果生成的數組長度
var listlength=0;
//創建自定字符串，優化效率
function StringBuffer(){this.data=[];}
//賦值
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//輸出
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//去掉字符串兩邊空格
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//隱藏函數 主要是隱藏顯示的提示下拉層和iframe，關於iframe下面在說其作用
function hiddensearch()
{
$(rlist).style.display="none";
$(rFrame).style.display="none";
}
//顯示函數 主要是顯示的提示下拉層和iframe 參數num,根據該參數控制要顯示提示層和iframe的高度
function showsearch(num)
{
  $(rlist).style.display=;
  $(rFrame).style.display=;
  //這裡我定義每個返回查詢結果的提示高度為20px,其中提示層總高度又加了num,是因為我在定義樣式時使用了padding一個像素
  $(rlist).style.height=num*20+num+px;
  //同樣定位iframe的高度
  $(rFrame).style.height=num*20+num+px;
}
//返回文本輸入框的坐標函數，參數element為要返回的對象,參數offset可選為offsetLeft|offsetTop 分別表示為該對象距離左窗口上角的絕對位置
//www.devdao.com 利用這個函數可以定位我們要顯示的提示層位置，使提示層正確的顯示在文本輸入框下面
function getposition(element,offset)
{
    var c=0;
    while(element)
    {
        c+=element[offset];
        element=element.offsetParent
    }
    return c;
}
//創建提示層函數 包括提示層和為了避免在文本輸入框下面出現select下拉選框時我們的提示層不能再select之上的iframe
//可以理解為當文本輸入框下有select下拉選框時從底向上依次為 select下拉選框-iframe-提示層
function createlist()
{
//創建提示層
var listDiv=document.createElement("div");
//提示層id
listDiv.id="rlist";       
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
listDiv.style.width=$(keyword).clientWidth+"px";
listDiv.style.left=getposition($(keyword),offsetLeft)+1.5+"px";
listDiv.style.top =(getposition($(keyword),offsetTop)+$(keyword).clientHeight +3)+"px";

var listFrame=document.createElement("iframe");
listFrame.id="rFrame";
listFrame.style.zIndex="1";
listFrame.style.position="absolute";
listFrame.style.border="0";
listFrame.style.display="none";
listFrame.style.width=$(keyword).clientWidth+"px";
listFrame.style.left=getposition($(keyword),offsetLeft)+1+"px";
listFrame.style.top =(getposition($(keyword),offsetTop)+$(keyword).clientHeight +3)+"px";
document.body.appendChild(listDiv);      
document.body.appendChild(listFrame);
}
function setstyle(element,classname)
{
switch (classname)
    {
     case m:
       element.style.fontSize="12px";
    element.style.fontFamily="arial,sans-serif";
    element.style.backgroundColor="#3366cc";
    element.style.color="black";
    element.style.width=$(keyword).clientWidth-2+"px";
    element.style.height="20px";
          element.style.padding="1px 0px 0px 2px";
          if(element.displaySpan)element.displaySpan.style.color="white"
    break;
     case d:
       element.style.fontSize="12px";
    element.style.fontFamily="arial,sans-serif";
    element.style.backgroundColor="white";
    element.style.color="black";
    element.style.width=$(keyword).clientWidth-2+"px";
    element.style.height="20px";
          element.style.padding="1px 0px 0px 2px";
          if(element.displaySpan)element.displaySpan.style.color="green"
    break;
  case t:
       element.style.width="80%";
    if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
    else element.style.styleFloat="left";
    element.style.whiteSpace="nowrap";
    element.style.overflow="hidden";
    element.style.textOverflow="ellipsis";
    element.style.fontSize="12px";
    element.style.textAlign="left";
    break;
  case h:
       element.style.width="20%";
    if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
&nb