溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

AJAX如何實現(xiàn)仿Google Suggest效果

發(fā)布時間：2021-09-30 10:07:43 來源：億速云 閱讀：128 作者：小新 欄目：web開發(fā)

這篇文章主要為大家展示了“AJAX如何實現(xiàn)仿Google Suggest效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“AJAX如何實現(xiàn)仿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如何實現(xiàn)仿Google Suggest效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手