主頁 > 知識庫 > AJAX實現(xiàn)仿Google Suggest效果

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

熱門標(biāo)簽:電銷機器人違法了嗎 上海浦東騰訊地圖標(biāo)注位置 遼寧銀行智能外呼系統(tǒng) 遼寧正規(guī)電銷機器人 澳大利亞城市地圖標(biāo)注 許昌智能電銷機器人公司 辰溪地圖標(biāo)注 海南銀行智能外呼系統(tǒng)商家 姜堰電銷機器人
修復(fù)了一些細(xì)節(jié)代碼(支持持續(xù)按鍵事件)
*項目名稱:AJAX實現(xiàn)類Google Suggest效果
*作者:草履蟲(也就是藍(lán)色的ecma)
*聯(lián)系:caolvchong@gmail.com
*時間:2007-7-7
*工具: DreamWeaver(寫ASP),Aptana(寫Javascript,HTML和CSS),Emeditor(寫這篇文章),Access2003(數(shù)據(jù)庫)
*測試平臺:Firefox2.0,IE6.0,IE7.0
*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本機上,可能訪問不順暢)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=55(轉(zhuǎn)貼,使用請注明)
*:文件結(jié)構(gòu):
  index.htm:首頁,展現(xiàn)效果
  ajax_result.asp:ajax調(diào)用后臺返回結(jié)果文件
  result.asp:搜索結(jié)果文件,這個我并沒有做,具體功能根據(jù)需求來寫
  數(shù)據(jù)庫(suggest.mdb):
    id:自動編號
    keyword:關(guān)鍵字
    seachtimes:被搜索次數(shù)
    matchnum:匹配的文章數(shù)目(關(guān)于這個方面想了蠻久,如何取得文章數(shù)呢,不能是搜索時動態(tài)產(chǎn)生,不然在偌大數(shù)據(jù)庫中查詢費時費力.那么必然是在后臺某個時候去其他的數(shù)據(jù)庫表中添加的,原來想把這方面也做了,但限于算法的不成熟和時間的限制.所以就用了隨機數(shù)來替換.)
*補充:
  和google suggest還有一些差距,比如一直按著方向鍵問題和其他細(xì)節(jié)問題,這些都有待改進(jìn).
*效果圖:
  suggest.js
復(fù)制代碼 代碼如下:

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;inodes.length;i++){
  if(nodes!=$("keyword")){
   $("suggest").innerHTML="";
   }
  }
}

打包文件下載
您可能感興趣的文章:
  • JSuggest自動匹配下拉框使用方法(示例代碼)
  • inputSuggest文本框輸入時提示、自動完成效果(郵箱輸入自動補全插件)
  • javascript suggest效果 自動完成實現(xiàn)代碼分享
  • suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)(針對中文輸入法狀態(tài))
  • ajax Suggest類似google的搜索提示效果
  • 仿google搜索提示 SuggestFramework的使用
  • Google Suggest ;-) 基于js的動態(tài)下拉菜單
  • 有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問題

標(biāo)簽:銅川 伊春 西藏 威海 晉城 崇左 深圳 撫州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《AJAX實現(xiàn)仿Google Suggest效果》,本文關(guān)鍵詞  AJAX,實現(xiàn),仿,Google,Suggest,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《AJAX實現(xiàn)仿Google Suggest效果》相關(guān)的同類信息!
  • 本頁收集關(guān)于AJAX實現(xiàn)仿Google Suggest效果的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章