search_suggest.js

Ajax仿Google搜索提示 非常好用代码简单 一看就会

/*
飞飞Ajax模仿google提示输入框 使用说明 v1.3
本程序由飞飞asp乐园编写，其中部分代码来源于网上
如有侵权 请与我联系

*************************************************
特别感谢：  A_极光 网友针对v1.2版本所提的修改建议
*************************************************
飞飞Asp乐园
www.ffasp.com
QQ:276230416
*********************************************


程序介绍：

本程序官网演示地址：http://www.ffasp.com/content.asp?newsid=969
转载请注明出处

此小程序是模仿Google输入提示框所编写
亦可用于用户注册邮箱时的提示
此程序使用方便简单、易用灵活
且不限Asp、php、net

文件使用说明：
在需要使用的页面首先要引用2个js文件
<script src="jquery1.2.3.min.js"></script>
<script src="search_suggest.js"></script>
此二文件必须放于调用函数之前
调用函数
<script>SuggestShow("aa","search.asp",2,"hello")</script>
函数介绍：
"aa":                        为需要输入信息的input的name和id,如果想修饰该input可以通过css“#”选择符修饰
search.asp                   即为远程页面(数据获取，信息处理页面)
                             该页面返回根据              
							 “aa”输入的信息的所有提示
                             search.asp文件输出格式为xml
                             若该页面需要接受参数可以使用Request.Form()方法接受"aa",即所设定的表单的name值
2                            为模拟下拉框的z-index值
hello                        为"aa"的默认值
*/

var array=new Array(); //要SUGGEST的内容 
//var zz=-1; //此为指针 
//函数生成下拉列表 
function buildList(InputName){ 
zz=-1; 
document.getElementById(InputName+"search_suggest").innerHTML="<iframe style=\"position:absolute;z-index: -1;top:0;left:0;scrolling:no;border:1px ridge;width:100%;height:100%;\" frameborder=0></iframe>"; 
for(var i=0;i<array.length;i++)
{ 
	
	if(array[i]!="")
	{ 
		document.getElementById(InputName+"search_suggest").innerHTML+="<div id='"+InputName+"item" + i + "' class='item_normal' onmouseover='beMouseOver(" + i +",\""+InputName+"\")'  onclick='beClick(" + i + ",\""+InputName+"\")'>" + array[i] + "</div>"; 
	} 
}//for循环
		document.getElementById(InputName+"search_suggest").innerHTML+="<div id='"+InputName+"item" + array.length + "' class='cancel' onclick='beClick2(" + array.length + ",\""+InputName+"\")'>取消</div>"; 

}//函数 

//函数鼠标经过效果 
function beMouseOverEFF(i,InputName){ 
	if ((i>=0)&(i<=array.length-1))
	{ 
		document.getElementById(InputName+"item" + i).className="item_high"; 
	} 
} 
//函数鼠标移开效果 
function beMouseOutEFF(i,InputName)
{ 
	if ((i>=0)&(i<=array.length-1))
	{ 
		document.getElementById(InputName+"item" + i).className="item_normal"; 
	} 
} 
//函数鼠标经过 
function beMouseOver(i,InputName)
{ 
	document.getElementById(InputName).focus(); 
	beMouseOutEFF(zz,InputName); 
	zz=i; 
	beMouseOverEFF(zz,InputName); 
} 

//函数单击 
function beClick(i,InputName)
{ 
	document.getElementById(InputName).value=array[i]; 
	document.getElementById(InputName).className="key_normal"; 
	document.getElementById(InputName+"search_suggest").className="suggest_hidden"; 
	document.getElementById(InputName).focus();
	//zz=-1; 
} 
//函数单击 
function beClick2(i,InputName)
{ 
//	document.getElementById(InputName).value=array[i]; 
//	document.getElementById(InputName).className="key_normal"; 
	document.getElementById(InputName+"search_suggest").className="suggest_hidden"; 
//	document.getElementById(InputName).focus();
	//zz=-1; 
} 

//方向键接收函数 
function beKeyDown(InputName){ 
//往下按 
if (event.keyCode==40)
{ 	
	if(zz<array.length-1){beMouseOutEFF(zz++,InputName);} 
	if(zz<array.length){beMouseOverEFF(zz,InputName);} 
} 
//往上按 
if (event.keyCode==38)
{ 
	if (zz>0){beMouseOutEFF(zz--,InputName);} 
	if (zz>=0){beMouseOverEFF(zz,InputName);} 
} 
//按回车或者TAB 
if (event.keyCode==13)
{ 
	if (zz!=-1)
	{ 
		beClick(zz,InputName);
	} 
} 
} 

//beKeyUp事件。与服务器通信 
function beKeyUp(InputName,Url)
{ 
	if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40)
	{ 
		if (document.getElementById(InputName).value.length<1)
		{
			document.getElementById(InputName+"search_suggest").className="suggest_hidden"; 
		}
		if (document.getElementById(InputName).value.length>=1)
		{ 
			$.ajax({
				type:"post",
				url:Url,
				dataType:"xml",
				data:InputName+"="+escape($("#"+InputName).val()),
				success:function(Back){
						for(i=0;i<array.length;i++){array[i]="";} 
						for(i=0;i<$("response",Back).size();i++){array[i]=$("response",Back).eq(i).text();} 
						if (array.length>0) 
						{ 
							buildList(InputName); 
							document.getElementById(InputName).className="key_abnormal"; 
							document.getElementById(InputName+"search_suggest").className="search_suggest"; 
						} 
						return;						
					},
				error:function(){alert("出错了");return false;}					
			})
		} 
	} 
} 

function SuggestShow(InputName,Url,zIndex,Email)
{
	document.write("<div style='position:relative;z-index:"+zIndex+";'>");
	document.write("<input id=\""+InputName+"\" type=\"text\" value=\""+Email+"\" name=\""+InputName+"\" class=\"key_normal\" onKeyDown=\"beKeyDown('"+InputName+"')\" onKeyUp=\"beKeyUp('"+InputName+"','"+Url+"')\" autoComplete=\"off\" />");
	document.write("<div id=\""+InputName+"search_suggest\" class=\"suggest_hidden\">");
	document.write("</div></div>")
}