AJAX Google Suggest 모방 효과 구현

세부 코드 를 복 구 했 습 니 다. (지속 버튼 이벤트 지원) *프로젝트 이름: AJAX 구현 클래스 Google Suggest 효과 * 작성 자: 짚신 벌레 (파란색 ecma) * 연락처:[email protected]* 시간: 2007 - 7 - 7 * 도구: DreamWeaver (ASP 쓰기), Aptana (Javascript 쓰기, HTML 과 CSS 쓰기), Emeditor (이 글 쓰기), Access 2003 (데이터베이스) * 테스트 플랫폼: Firefox 2.0, IE 6.0, IE 7.0 * 프레젠테이션 주소:http://finish.3322.org/suggest/index.htm(단기 적 으로 유효 합 니 다. 이 컴퓨터 에 서 는 접근 이 원활 하지 않 을 수 있 습 니 다) * 원문 주소:http://cceer.xmu.edu.cn/blog/view.asp?id=55(리 트 윗, 사용 설명 하 십시오) *: 파일 구조:  index. htm: 첫 페이지, 효과 보 여주 기  ajax result. asp: ajax 호출 배경 결과 파일  result. asp: 검색 결과 파일, 이 건 제 가 하지 않 았 습 니 다. 구체 적 인 기능 은 수요 에 따라 씁 니 다.  데이터베이스 (suggest. mdb):    id: 자동 번호    키워드    seachtimes: 검색 당 한 횟수    matchnum: 일치 하 는 글 의 수량 (이 부분 에 대해 오래 생각 했 습 니 다. 어떻게 글 의 수 를 얻 을 수 있 습 니까? 검색 할 때 동태 적 으로 생 겨 날 수 없습니다. 그렇지 않 으 면 이렇게 큰 데이터 베이스 에서 조회 하 는 데 시간 이 걸 립 니 다. 그러면 배경 에서 어느 때 다른 데이터 베이스 표 에 추 가 했 을 것 입 니 다. 원래 이 부분 도 하려 고 했 지만 알고리즘 이 성숙 하지 않 고 시간의 제한 에 국한 되 어 무 작위 로 바 꾸 었 습 니 다.)* 보충:  google suggest 와 약간의 차이 가 있 습 니 다. 예 를 들 어 방향 키 를 계속 누 르 는 문제 와 다른 세부 적 인 문제 등 은 모두 개선 되 어야 합 니 다. * 효과 도:

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=""; 
   } 
  } 
}