温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

AJAX如何实现仿Google Suggest效果

发布时间:2021-09-30 10:07:43 来源:亿速云 阅读:128 作者:小新 栏目:web开发

这篇文章主要为大家展示了“AJAX如何实现仿Google Suggest效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“AJAX如何实现仿Google Suggest效果”这篇文章吧。

代码如下:


<!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("keyword="+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="";
   }
  }
}

以上是“AJAX如何实现仿Google Suggest效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI