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

发布时间：2023-06-08 13:49:50 所属栏目：Asp教程来源：

导读：前段时间想用google suggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦。

对于更完整的代码可以参考，这个是支持数据库的版本。经过脚本之

前段时间想用google suggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦。

对于更完整的代码可以参考，这个是支持数据库的版本。经过脚本之家编辑测试。

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



<%

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

%>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!