ajax仿google搜尋下拉提示

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//定義變數lastindex 表示為滑鼠在查詢結果上滑動所在位置，初始為-1
var lastindex=-1;
//定義變數flag 表示是否根據使用者輸入的關鍵字進行ajax查詢,flase為允許查詢 true為禁止查詢
var flag=false;
//返回的查詢結果產生的數組長度
var listlength=0;
function StringBuffer(){//定義對象StringBuffer
       this.data=[];//建立屬性，自定字串
      } 
StringBuffer.prototype.append=function(){//聲明StringBuffer的方法
           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, "");
         }
function hiddensearch(){//隱藏函數 主要是隱藏顯示的提示下拉層和iframe，關於iframe下面在說其作用
       $('rlist').style.display="none";
       $('rFrame').style.display="none";
      }
function showsearch(num){//顯示函數 主要是顯示的提示下拉層和iframe 參數num,根據該參數控制要顯示提示層和iframe的高度
        $('rlist').style.display='';
        $('rFrame').style.display='';
       //這裡我定義每個返回查詢結果的提示高度為20px,其中提示層總高度又加了num,是因為我在定義樣式時使用了padding一個像素
        $('rlist').style.height=num*20+num+'px';
         //同樣定位iframe的高度
        $('rFrame').style.height=num*20+num+'px';
      }
function getposition(element,offset){
      //返迴文本輸入框的座標函數，參數element為要返回的對象,參數offset可選為offsetLeft|offsetTop 分別表示為該對象距離左視窗上角的絕對位置
      //利用這個函數可以定位我們要顯示的提示層位置，使提示層正確的顯示在文本輸入框下面
          var c=0;
          while(element){
               c+=element[offset];
               element=element.offsetParent
             }
          return c;
         }
/********************************DOM*************************************************/
function createlist(){//建立提示層
      var listDiv=document.createElement("div");//createElement()方法可建立元素節點
      listDiv.id="rlist"; //提示層id       
      listDiv.style.zIndex="2";//z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面，這個設定的是後便
      listDiv.style.position="absolute"; //position 屬性把元素放置到一個靜態、相對的、絕對的、或固定的位置中。這個和下邊的那個是對應的，也就是說和下邊的架構是對應的，位置設定為 absolute 的元素，可定位於相對於包含它的元素的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。下邊的出現也是因為選擇了這個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";//設定一個定位元素的上外邊距邊界與其包含塊上邊界之間的位移。提示：如果 "position" 屬性的值為 "static"，那麼設定 "top" 屬性不會產生任何效果。
      var listFrame=document.createElement("iframe");
      listFrame.id="rFrame";//提示層id
      listFrame.style.zIndex="1";//z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面，這個設定的是前邊
      listFrame.style.position="absolute";//和上邊的那個設定是對應的
      listFrame.style.border="0";//設定邊框為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";//設定一個定位元素的上外邊距邊界與其包含塊上邊界之間的位移。提示：如果 "position" 屬性的值為 "static"，那麼設定 "top" 屬性不會產生任何效果。
      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";//fontFamily 屬性定義用於元素文本顯示的字型。
          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";//padding 屬性設定元素的內邊距。
          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";
          else element.style.styleFloat="right";
          element.style.textAlign="right";
          element.style.color="green";
          break;
       }
     }
function focusitem(index){
       if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
       if($('item'+index)!=null){
                setstyle($('item'+index), 'm');
                lastindex=index;
              }
       else {
         $("keyword").focus();
        }
      }
function searchclick(index){
         $("keyword").value=$('title'+index).innerHTML;
         flag=true;
       }
function searchkeydown(e){
       if($('rlist').innerHTML=='')return;
        var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
  //down
  if(keycode==40)
  {
if(lastindex==-1||lastindex==listlength-1)
{
  focusitem(0);
  searchclick(0);
}
else{
  focusitem(lastindex+1);
  searchclick(lastindex+1);
}
  }
if(keycode==38)
{
if(lastindex==-1)
{
  focusitem(0);
  searchclick(0);
}
else{
  focusitem(lastindex-1);
  searchclick(lastindex-1);
}
}
if(keycode==13)
{
  focusitem(lastindex);
  $("keyword").value=$('title'+lastindex).innerText;
}    
if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}
}
function showresult(xmlhttp)
{
var result=unescape(xmlhttp.responseText);
if(result!=''){
    var resultstring=new StringBuffer();
       var title=result.split('$')[0];
       var hits=result.split('$')[1];
    for(var i=0;i<title.split('|').length;i++)
    {
    resultstring.append('<div id="item'+i+'">');
    resultstring.append('<span id=title'+i+'>');
    resultstring.append(title.split('|')[i]);
    resultstring.append('</span>');
    resultstring.append('<span id=hits'+i+'>');
    resultstring.append(hits.split('|')[i]);
    resultstring.append('</span>');
    resultstring.append('</div>');
    }
    $('rlist').innerHTML=resultstring.tostring();
    for(var j=0;j<title.split('|').length;j++)
    {
     setstyle($('item'+j),'d');
  $('item'+j).displaySpan=$('hits'+j);
     setstyle($('title'+j),'t');
     setstyle($('hits'+j),'h');
    }
    showsearch(title.split('|').length);
    listlength=title.split('|').length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
else
{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
   if(listlength!=0)$('keyword').onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch; 
createlist();
}
Event.observe(window,'load',oninit);
</script>