asp+ajax仿google搜索提示效果代碼
2024-05-04 11:00:07
供稿：網(wǎng)友
對(duì)于更完整的代碼可以參考，這個(gè)是支持?jǐn)?shù)據(jù)庫(kù)的版本。經(jīng)過(guò)錯(cuò)新站長(zhǎng)站編輯測(cè)試。
Asp+Ajax仿google搜索提示效果 數(shù)據(jù)庫(kù)版
需要修改的地方有
復(fù)制代碼 代碼如下:
javascript.js
var url="ajax.asp"; //后臺(tái)地址
var time_delayajax=300; //搜索延遲
var time_delayupdown=100; //方向鍵延遲
obj_div.style.top = (xtop + 20) + "px"; //20差不多是輸入框的高度,請(qǐng)根據(jù)實(shí)際情況調(diào)整
ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后臺(tái)的值
dd=d+"<li onmouseover=/"overli("+i+");/" onmousedown=/"downli("+i+")/" onmouseup=/"upli("+i+",event)/" onmousemove=/"moveli();/"><span>約"+c[1]+"結(jié)果</span>"+c[0]+"</li>";//****li的顯示
后臺(tái)輸出結(jié)果格式必需為'文本1,文本2'.....
'java,2''javascript,11''java示例,22'等
default.css
復(fù)制代碼 代碼如下:
.ajaxsearch {
width:300px; //提示層的寬度
}
首頁(yè)index.html
復(fù)制代碼 代碼如下:
<!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
復(fù)制代碼 代碼如下:
///////////////////////////////搜索提示框/////////////////////////////////
var obj_div; //提示層對(duì)象
var obj_input; //輸入框?qū)ο?
var main_delay; //判斷值變化延遲對(duì)象
var ajax_delay; //ajax延遲搜索對(duì)象
var updown_delay; //方向鍵延遲對(duì)象
var ajax_xmlhttp; //ajax對(duì)象
var div_word=null; //當(dāng)前提示層對(duì)應(yīng)的搜索值
var li_num=-1; //偽光標(biāo)位置,提示層被選中的li序號(hào),從0開(kāi)始
var li_down=-1; //鼠標(biāo)按下提示層的序號(hào)
var value_ed=""; //輸入框延遲前的值
var value_ing=""; //輸入框當(dāng)前的值
var value_unexit=""; //搜索過(guò)沒(méi)有結(jié)果的值開(kāi)頭
var updown_run=false; //允許方向鍵上下
var ajax_run=false; //true為正常進(jìn)程,false停止ajax
var ajax_run_ing=false; //true正在運(yùn)行,false空閑
var input_focus=false; //文本框焦點(diǎn)
var url="ajax.asp"; //后臺(tái)地址**********************************************************
var time_delayajax=300; //搜索延遲**********************************************************
var time_delayupdown=100; //方向鍵延遲********************************************************
