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

%>

时间： 2024-11-08 22:33:27

asp+ajax仿google搜索提示效果代码的相关文章

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差不多是输入框

php+ajax 仿google 下拉框代码一

php+ajax 仿google 下拉框代码一,这里php代码 <?php header('Content-Type:text/html;charset=utf-8'); require('../../admin/include/db_conf.php'); if($_POST['add']){     $keyword = trim($_POST['keyword']);     if(empty($keyword)){         header("LOCATION: suggest

仿google搜索提示 SuggestFramework的使用_AJAX相关

一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma

仿google搜索提示 SuggestFramework的使用

一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma

ajax仿google搜索下拉提示

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> //定义变量lastindex 表示为鼠标在查询结果上滑动所在位置,初始为-1 var lastindex=-1; //定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询 var

php+ajax 仿google 下拉框代码三

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

基于jquery的仿百度搜索框效果代码_jquery

先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码_jquery

本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

jQuery实现仿Google首页拖动效果的方法_jquery

本文实例讲述了jQuery实现仿Google首页拖动效果的方法.分享给大家供大家参考.具体如下: 这里用jQuery.js库写了一个仿Google首页拖动的特效代码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>用JQUERY实现的仿Googl