asp: suggest ajax

最新推荐文章于 2015-04-30 08:29:29 发布

ghotsl

最新推荐文章于 2015-04-30 08:29:29 发布

阅读量427

点赞数

分类专栏：无

无专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>suggest ajax示例</title>
<meta name="author" content="geovindu 塗聚文"/><style type="text/css">
.ajaxsearch {  
 width:300px; /*提示层的宽度 */
</style>
<script language="javascript" src="suggestajax.js" type="text/javascript"></script> 

</head> 
 
<body onResize="removediv();"> 
<div style="margin:20px 50px"> 
<input style="width:298px;height:18px" type="text" autocomplete="off" onBlur="blurdeal();" onKeyDown="keydowndeal(event);" onFocus="focusdeal(event);" /> 
</div> 
</body>

</html>

suggestajax.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);  
}  
try{  
 ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');  
}catch(e){  
 try{  
  ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');  
 }catch(e){  
  try{  
   ajax_xmlhttp= new XMLHttpRequest();  
  }catch(e){ajax_xmlhttp=null;}  
 }  
}  
创建提示层  
function createajaxdiv(){  
 var create_div = document.createElement("div");  
 create_div.type = "div";  
 var promptdiv = document.body.appendChild(create_div);  
 promptdiv.className = "ajaxsearch";  
 obj_div=promptdiv;  
}  
设置提示层位置  
function removediv(){  
 if(!obj_div || !obj_input)return false;  
 if(obj_div.style.display=="none")return false;  
 var obj=obj_input;  
 var xtop=0;  
 var xleft=0;  
 while(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;  
}  
隐藏提示层  
function hideajaxdiv(){  
 obj_div.style.display="none";  
 li_down=-1;  
}  
设置被选<li>css样式  
function 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";  
}  
鼠标经过提示层  
function overli(Fun_seletedlinum){  
 if(li_num==-1)value_ing=obj_input.value;  
 li_num=Fun_seletedlinum;  
 setlistyle();  
}  
鼠标拖动提示层  
function moveli(){  
 if(window.getSelection){  
  setfocus();  
  window.getSelection().removeAllRanges();  
 }else{  
  document.selection.empty();  
  setfocus();  
 }  
}  
鼠标按下提示层  
function downli(Fun_seletedlinum){  
 if(!obj_input)return false;  
 li_down=Fun_seletedlinum;  
 input_focus=true;  
}  
鼠标弹起提示层  
function upli(Fun_seletedlinum,Fun_event){  
 if(!obj_input)return false;  
 if(Fun_event.button==2){li_down=-1;return}  
 if(li_down!=Fun_seletedlinum){  
  li_down=-1;  
  return false;  
 }  
 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="";  
}  
设置文本框获取焦点///  
function setfocus(){  
 if(window.event){  
  var r = obj_input.createTextRange();  
  r.moveStart('character',obj_input.value.length);  
  r.collapse(true);  
  r.select();  
 }else{  
  obj_input.selectionStart=obj_input.value.length;  
  obj_input.focus();  
 }  
}  
文本框失去焦点  
function blurdeal(){  
 if(input_focus==true){  
  setfocus();  
  setTimeout("setfocus()");  
  return false;  
 }  
 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="";  
}  
文本框获取焦点  
function focusdeal(Fun_event){  
 if(!obj_div)createajaxdiv();  
 if(input_focus==true){  
  input_focus=false;  
  return 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";  
  removediv();  
 }else{  
  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="";  
  removediv();  
 }  
 main_delay=setInterval("mainajax()",10);  
}  
主函数  
function 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);  
  }else{  
   hideajaxdiv();  
   obj_div.innerHTML="";  
   ajax_run=false;  
   return false;  
     
  }    
 }  
}  
获取搜索内容  
function getsearch(){  
 var temp_value=obj_input.value;  
 if(ajax_xmlhttp==null){  
  return false;  
 }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 contant=ajax_xmlhttp.responseText;  
    if(contant!="" && ajax_run==true){  
     div_word=temp_value;  
     obj_div.innerHTML=resetcontant(contant);  
     obj_div.style.display="block";  
     removediv();removediv();  
    }else{  
     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)); //提交到后台的值*****************************************  
}  
内容重组///  
function resetcontant(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;  
 var d;  
 d="<ul>";  
 for(var i in b){  
  c=b[i].split(",");  
  //***************************************************************  
  d=d+"<li οnmοuseοver=\"overli("+i+");\" οnmοusedοwn=\"downli("+i+")\" οnmοuseup=\"upli("+i+",event)\" οnmοusemοve=\"moveli();\"><span>"+c[1]+"</span>"+c[0]+"</li>";  //约 结果
  //***************************************************************  
 }  
 d=d+"<li οnmοusedοwn=\"input_focus=true;li_down=-1;\" οnmοuseup=\"li_down=-1\" οnmοusemοve=\"moveli();\"><span><a class=\"shutajaxdiv\" οnclick=\"hideajaxdiv();\">关闭</a></span></li>" 
 d=d+"</ul>";  
 return d;  
}  
键盘事件  
function keydowndeal(Fun_event){  
 var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);  
 if(keyc==13){hideajaxdiv();return false;}  
 if(keyc==27){  
  if(obj_div.style.display=="block" && li_num>-1)value_ed=obj_input.value=value_ing;  
  hideajaxdiv();  
  return false;  
 }   
 if(keyc==40 || keyc==38){  
  if(div_word==obj_input.value && obj_div.style.display=="none" && obj_div.innerHTML!=""){  
   obj_div.style.display="block";  
   removediv();  
   return false;  
  }  
  if(li_num==-1){  
   if(div_word!=obj_input.value)return false;  
  }else{  
   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  
function 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;}  
 }else{  
  if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML="";li_num=-1;return false;}  
 }  
 if(updown_run==false)return false;  
 if(li_num==-1)value_ing=value_ed;  
 if(Fun_key==40){  
  if(li_num<obj_div.firstChild.childNodes.length-2){  
   li_num++;  
  }else{  
   li_num=-1;  
  }  
 }  
 if(Fun_key==38){  
  if(li_num>=0){  
   li_num--;  
  }else{  
   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;  
 }else{  
  value_ed=obj_input.value=value_ing;  
 }  
 setlistyle();  
}

ajax.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>  
<%Response.CodePage="65001"%>  
<%Response.Charset="utf-8" %>  

<!--#include file="Conn.asp"-->
<%  



dim Sift_value  
dim Sql,Rs,I,Num  
dim Contant  
Contant="" 
Num=10  


Sift_value=replace(unescape(request.form("sift_value")),"""","""""")  
 
Sql="select top "&Num&" ShopAddress,LicenseId from LC where ShopAddress like '%"&Sift_value&"%' order by LicenseId" 
'Response.Write Sql
set Rs=server.CreateObject("adodb.recordset")  
Rs.open Sql,O_con,1,1  
if not (Rs.eof and Rs.bof) then  
 for I=0 to Num-1  
  Contant=Contant&"'"&rs(0)&","&rs(1)&"'" 
  Rs.movenext  
  if Rs.eof then exit for  
 next  
end if  
response.Write(Contant)  
Rs.close  
set Rs=nothing  
%>

哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构(分析)整合学习, 情商(EQ)运筹(学)成功.---Geovin Du(涂聚文）

ghotsl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp: suggest ajax

suggest ajax示例.ajaxsearch { width:300px; /*提示层的宽度 */ suggestajax.js:///////////////////////////////搜索提示框///////////////////////////////// var obj_div; //提示层对象
复制链接

扫一扫