管理资源吧首页>>>教程>>>编程>>>ASP教程>>>

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

　　

复制代码 代码如下:

　　.ajaxsearch {

　　width:300px; //提示层的宽度

　　}

　　首页index.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">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<link rel="stylesheet" type="text/css" href="default.css" />

　　<script language="JavaScript" src="javascript.js" type="text/javascript"></script>

　　<title>Google suggest高仿示例</title>

　　</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>

　　脚本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;

　　}

　　////////////////////////设置被选<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 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>";

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

　　<%option explicit%>

　　<%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&" 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

　　%>

教程首页 更多教程