Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > asp技巧

asp+ajax仿google搜索提示效果代码

来源:中文源码网    浏览:150 次    日期:2024-05-19 03:48:26
【下载文档:  asp+ajax仿google搜索提示效果代码.txt 】


asp+ajax仿google搜索提示效果代码
对于更完整的代码可以参考,这个是支持数据库的版本。经过中文源码网编辑测试。Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.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+"
  • 约"+c[1]+"结果"+c[0]+"
  • ";//****li的显示 后台输出结果格式必需为'文本1,文本2'..... 'java,2''javascript,11''java示例,22'等 default.css 复制代码 代码如下: .ajaxsearch { width:300px; //提示层的宽度 } 首页index.html 复制代码 代码如下: Google suggest高仿示例
    脚本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); } 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; } ////////////////////////设置被选
  • css样式//////////////////////// function setlistyle(){ for(var i=0;i约"+c[1]+"结果"+c[0]+"
  • "; //*************************************************************** } d=d+"
  • 关闭
  • " d=d+""; 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=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" %> <%option explicit%> <%Response.CodePage="65001"%> <%Response.Charset="utf-8" %> <% 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&" keyword,matchnum from search where keyword like """&Sift_value&"%"" order by id" set Rs=server.CreateObject("adodb.recordset") Rs.open Sql,Conn,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 %>

    相关内容