仿google 搜索的下拉提示效果(2)_建站学-个人建站指南,网页制作,网站设计,网站制作教程

相关代码：

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">   
<head> 
<meta http-equiv="Content-Type" c /> 
<title>草履虫---简易Google Suggest</title> 
  <link type="text/css" rel="stylesheet" href="suggest.css"/> 
  <script type="text/javascript" src="suggest.js"></script> 
</head> 
<body > 
  <img src="suggest.gif"  /> 
  <form action="result.asp" method="post" name="search" autocomplete="off"> 
    <input type="text" name="keyword" id="keyword"  /> 
    <input type="submit" value="手气不错"/> 
    <div id="suggest"></div> 
  </form> 
</body> 
</html>

suggest.js

var j=-1;  
var temp_str;  
var $=function(node){  
return document.getElementById(node);  
}  
var $=function(node){  
return document.getElementsByTagName(node);  
}  
function ajax_keyword(){  
var xmlhttp;  
try{  
  xmlhttp=new XMLHttpRequest();  
  }  
catch(e){  
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
xmlhttp.onreadystatechange=function(){  
if (xmlhttp.readyState==4){  
  if (xmlhttp.status==200){  
   var data=xmlhttp.responseText;  
   $("suggest").innerHTML=data;  
   j=-1;  
   }  
  }  
}  
xmlhttp.open("post", "ajax_result.asp", true);  
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
xmlhttp.send("keywordkeyword="+escape($("keyword").value));   
}    
function keydeal(e){  
var keyc;  
if(window.event){  
  keyc=e.keyCode;  
  }  
else if(e.which){  
  keyc=e.which;  
  }  
if(keyc!=40 && keyc!=38){  
  ajax_keyword();  
  temp_str=$("keyword").value;  
  }  
if(keyc==40 || keyc==38){  
  if(keyc==40){  
   if(j<$("li").length){  
    j++;  
    if(j>=$("li").length){  
     j=-1;  
    }  
   }  
  if(j>=$("li").length){  
   j=-1;  
  }  
}  
  if(keyc==38){  
   if(j>=0){  
    j--;  
    if(j<=-1){  
     j=$("li").length;  
    }  
   }  
   else{  
    j=$("li").length-1;  
   }  
  }  
  set_style(j);  
  if(j>=0 && j<$("li").length){  
   $("keyword").value=$("li")[j].childNodes[0].nodeValue;  
   }  
  else{  
   $("keyword").value=temp_str;  
   }  
  }  
}  
function set_style(num){  
for(var i=0;i<$("li").length;i++){  
  var li_node=$("li");  
  li_node.className="";  
  }  
if(j>=0 && j<$("li").length){  
  var i_node=$("li")[j];  
  $("li")[j].className="select";  
  }  
}  
function mo(nodevalue){  
j=nodevalue;  
set_style(j);  
}  
function form_submit(){  
if(j>=0 && j<$("li").length){  
$("input")[0].value=$("li")[j].childNodes[0].nodeValue;  
}  
document.search.submit();  
}  
function hide_suggest(){  
var nodes=document.body.childNodes  
for(var i=0;i<nodes.length;i++){  
  if(nodes!=$("keyword")){  
   $("suggest").innerHTML="";  
   }  
  }  
}

(责任编辑：admin)

搜索

热门标签:

仿google 搜索的下拉提示效果(2)