얼마 전 Google Suggest를 사용하고 싶었는데 인터넷에서 많은 결과를 찾았지만 만족스럽지 않아 시간을 들여 하나 작성했습니다. 기본적으로 Google Suggest와 동일하며 이후의 대략적인 결과는 범위를 벗어납니다. 이 프로그램. 보다 완전한 코드를 보려면 데이터베이스를 지원하는 이 버전을 참조하세요. Script House에서 편집 및 테스트를 거친 후.
Asp+Ajax 모방 Google 검색 프롬프트 효과 데이터베이스 버전
수정해야 할 곳이 있습니다:
다음과 같이 코드 코드를 복사합니다.
자바스크립트.js
var url=ajax.asp; //백엔드 주소
var time_delayajax=300; //검색 지연
var time_delayupdown=100; //방향키 지연
obj_div.style.top = (xtop + 20) + px; //20은 거의 입력 상자의 높이이므로 실제 상황에 맞게 조정하세요.
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //백그라운드에 제출된 값
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>+c 정보 [1]+결과</span>+c[0]+</li>;//****li 표시
백그라운드 출력 결과 형식은 '텍스트 1, 텍스트 2'여야 합니다....
'java,2''javascript,11''java 예제,22'등.
default.css
다음과 같이 코드 코드를 복사합니다.
.ajax검색 {
width:300px; //프롬프트 레이어의 너비
}
Homeindex.html
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<머리>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<link rel=stylesheet type=text/css href=default.css />
<script 언어=JavaScript src=javascript.js type=text/javascript></script>
<title>Google은 모방 수준이 높은 사례를 제안합니다</title>
</head>
<본체 onResize=removediv();>
<div 스타일=마진:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onKeyDown=keydowndeal(event); onFocus=focusdeal(event);
</div>
</body>
</html>
스크립트javascript.js
다음과 같이 코드 코드를 복사합니다.
/////////////////////////////////검색 프롬프트 상자////////////// /// ///////////////////
var obj_div; //프롬프트 레이어 객체
var obj_input; //입력 상자 객체
var main_delay; //판정값 변경 지연 객체
var ajax_delay; //ajax 지연 검색 객체
var updown_delay; //방향키 지연 객체
var ajax_xmlhttp; //ajax 객체
var div_word=null; //현재 프롬프트 레이어에 해당하는 값 검색
var li_num=-1; //의사 커서 위치, 선택한 레이어의 li 번호를 0부터 표시합니다.
var li_down=-1; //마우스를 눌렀을 때 프롬프트 레이어의 시퀀스 번호
var value_ed=; //지연 전 입력 상자의 값
var value_ing=; //입력 상자의 현재 값
var value_unexit=; //결과가 없는 값의 시작 부분을 검색합니다.
var updown_run=false; //위아래 화살표 키 허용
var ajax_run=false; //true는 정상적인 프로세스를 의미하고 false는 ajax를 중지함을 의미합니다.
var ajax_run_ing=false; //true는 실행 중이고 false는 유휴 상태입니다.
var input_focus=false; //텍스트 상자 포커스
var url=ajax.asp; //백엔드 주소 *************************************** *********************
var time_delayajax=300; //검색 지연***************************************** ***** *******************
var time_delayupdown=100; //방향키 지연**************************************** ******************
var $=function(Fun_id){
return document.getElementById(Fun_id);
}
노력하다{
ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}잡기(e){
노력하다{
ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}잡기(e){
노력하다{
ajax_xmlhttp= new XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
/////////////////////////프롬프트 레이어 생성////////////////////// // /
함수 createajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
var 프롬프트div = document.body.appendChild(create_div);
프롬프트div.className = ajaxsearch;
obj_div=promptdiv;
}
//////////////////////////프롬프트 레이어 위치 설정/////////////////// //// //
함수 제거iv(){
if(!obj_div || !obj_input) false를 반환합니다.
if(obj_div.style.display==none) false를 반환합니다.
var obj=obj_input;
var xtop=0;
var xleft=0;
동안(obj){
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20은 거의 입력 상자의 높이입니다. 실제 상황에 따라 조정하세요**************** ****** ***************************************8
li_down=-1;
}
///////////////////////// 프롬프트 레이어 숨기기 /////////////////////// // /
함수 hideajaxdiv(){
obj_div.style.display=none;
li_down=-1;
}
//////////////////////////선택한 <li>css 스타일 설정///////////////// /// //////
함수 setlistyle(){
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
}
if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
}
//////////////////////////마우스가 프롬프트 레이어를 통과합니다////////////////// ////// //
함수 overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistyle();
}
//////////////////////////마우스 끌기 프롬프트 레이어///////////////////// // ///
함수 moveli(){
if(window.getSelection){
포커스 설정();
window.getSelection().removeAllRanges();
}또 다른{
document.selection.empty();
포커스 설정();
}
}
//////////////////////////마우스 누르기 프롬프트 레이어//////////////////// // ///
함수 downli(Fun_seletedlinum){
if(!obj_input) false를 반환합니다.
li_down=Fun_seletedlinum;
input_focus=true;
}
//////////////////////////마우스 팝업 프롬프트 레이어/////////////////// //// ///
함수 upli(Fun_seletedlinum,Fun_event){
if(!obj_input) false를 반환합니다.
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
거짓을 반환;
}
ClearTimeout(ajax_delay);
ClearTimeout(updown_delay);
updown_run=true;
ajax_run=false;
ajax_run_ing=false;
li_num=-1;
div_word=null;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=value_ed;
value_ing=value_ed;
hideajaxdiv();
obj_div.innerHTML=;
}
//////////////////////////포커스를 얻을 수 있도록 텍스트 상자 설정////////////////// ///// //
함수 setfocus(){
if(window.event){
var r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(true);
r.select();
}또 다른{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
//////////////////////////텍스트 상자가 초점을 잃습니다.//////////////////// //// //
함수 블러딜(){
if(input_focus==true){
포커스 설정();
setTimeout(setfocus());
거짓을 반환;
}
updown_run=false;
ajax_run=false;
ajax_run_ing=false;
ClearInterval(main_delay);
ClearTimeout(ajax_delay);
ClearTimeout(updown_delay);
hideajaxdiv();
if(value_ed!=obj_input.value)obj_div.innerHTML=;
}
//////////////////////////텍스트 상자에 포커스가 있음 ///////////////////// /// //
함수 focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
if(input_focus==true){
input_focus=false;
거짓을 반환;
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=text)return false;
updown_run=true;
ajax_run=true;
ajax_run_ing=false;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=block;
제거iv();
}또 다른{
obj_input=obj;
value_ed=obj.value;
value_ing=obj.value;
value_unexit=;
li_num=-1;
li_down=-1;
div_word=null;
obj_div.innerHTML=;
제거iv();
}
main_delay=setInterval(mainajax(),10);
}
/////////////////////////주요 기능 /////////////////////// ///
함수 mainajax(){
if(value_ed==obj_input.value)return false;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run=true;
value_ed=obj_input.value;
ClearTimeout(ajax_delay);
if(obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}또 다른{
hideajaxdiv();
obj_div.innerHTML=;
ajax_run=false;
거짓을 반환;
}
}
}
/////////////////////////검색 콘텐츠 가져오기////////////////////// /// /
함수 getsearch(){
var temp_value=obj_input.value;
if(ajax_xmlhttp==null){
거짓을 반환;
}else if(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=false;
}
ajax_xmlhttp.onreadystatechange=function(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
if(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
if(contant!= && ajax_run==true){
div_word=임시_값;
obj_div.innerHTML=resetcontant(contant);
obj_div.style.display=block;
제거iv();제거iv();
}또 다른{
hideajaxdiv();
}
updown_run=true;
ajax_run_ing=false;
li_num=-1;
if(contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(post,url,true);
ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
ajax_run_ing=true;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //백그라운드에 제출된 값**************************** * ***********
}
/////////////////////////콘텐츠 재구성/////////////////////// //
함수 재설정contant(Fun_contant){
if(Fun_contant==null || Fun_contant==)return ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Fun_contant==null || Fun_contant==)return ;
var b=a.split('');
var c;
바르드;
d=<ul>;
for(var i in b){
c=b[i].split(,);
//************************************************ ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>+c 정보 [1]+결과</span>+c[0]+</li>;
//************************************************ ***************
}
d=d+<li onmousedown=/input_focus=true;li_down=-1;/ onmouseup=/li_down=-1/ onmousemove=/moveli();/><span><a class=/shutajaxdiv/ onclick=/hideajaxdiv( );/>닫기</a></span></li>
d=d+</ul>;
d를 반환;
}
//////////////////////////키보드 이벤트////////////////////// ////
함수 keydowndeal(Fun_event){
var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);
if(keyc==13){hideajaxdiv(); false를 반환;}
if(키c==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
hideajaxdiv();
거짓을 반환;
}
if(keyc==40 || keyc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=block;
제거iv();
거짓을 반환;
}
if(li_num==-1){
if(div_word!=obj_input.value)return false;
}또 다른{
if(div_word!=value_ing)return false;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)return false;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=false;
}
}
//////////////////////////방향키 이동 li//////////////////// /// //
함수 updownli(Fun_key){
if(!obj_div){return false;}
updown_run=true;
if(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}또 다른{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
if(updown_run==false) false를 반환합니다.
if(li_num==-1)value_ing=value_ed;
if(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}또 다른{
li_num=-1;
}
}
if(Fun_key==38){
if(li_num>=0){
li_num--;
}또 다른{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
if(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}또 다른{
value_ed=obj_input.value=value_ing;
}
setlistyle();
}
배경 ajax.asp
다음과 같이 코드 코드를 복사합니다.
<%@LANGUAGE=VBSCRIPT 코드페이지=65001 %>
<%옵션 명시%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#포함 파일=conn.asp-->
<%
희미한 값
희미한 SQL, Rs, I, Num
희미한불변
내용=
숫자=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=상위 &Num& 키워드 선택, &Sift_value&%와 같은 키워드가 ID별로 정렬되는 검색에서 matchnum
Rs=server.CreateObject(adodb.recordset) 설정
Rs.open SQL,Conn,1,1
그렇지 않은 경우(Rs.eof 및 Rs.bof)
I=0에서 Num-1까지
상수=상수&'&rs(0)&,&rs(1)&'
다음으로 이동
Rs.eof이면 다음으로 종료합니다.
다음
종료하면
응답.쓰기(계속)
Rs.close
Rs=아무것도 설정하지 않음
%>