简单模拟google输入自动完成

首页 > 編程·程序設計 > 简单模拟google输入自动完成

简单模拟google输入自动完成

2008年3月28日編程·程序設計 760 views

昨晚看到景圳的QQ空间里一篇关于用JS控制DIV显示位置的文章，想到自己之前写订餐系统时的一个模拟Google输入自动完成的方法，于是也想整理出来。之前本BLOG转来的一篇文章比我这个方法更完善点，详细见：用AJAX实现google输入自动完成的简单模拟。本文介绍的这种方法也是用AJAX来实现，没做太多的注释，不过都蛮容易看懂的。

下面先看截图：

实现方法：

<script language=“javascript” type=“text/javascript”>
var oLeft=0,oTop=0,oWidth=0,oHeight=0;
var oLeft1=180,oTop1=220,oWidth1=100;
var disStr_TrueName;
var thisInput_TrueName;
var thisInputValue_TrueName;
var username=“”;
//获取坐标输入框的坐标
function getAbsPoint()
{
e = document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
var x = e.offsetLeft, y = e.offsetTop;
while(e=e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
oLeft1=x;
oTop1=y+20;
}
//输入框内容改变触发事件
function showUserInfo_TrueName_List_callBack()
{
txtAuthor=document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
username=txtAuthor.value;
thisInputValue_TrueName=username;
//通过AJAX读取数据库获取信息
AjaxMethod.getUserInfoByTrueName(username,getUserInfoByTrueName_CallBack);
}
//构造信息内容
function getUserInfoByTrueName_CallBack(response)
{
if (response.value != null)
{
var ds = response.value;
try{
if(ds != null && typeof(ds) == “object” && ds.Tables != null)
{
tbStr=“<table id=’AJAX_UsersShowTB1’style=’BORDER-RIGHT: #cccccc 1px double; BORDER-TOP: #cccccc 1px double; BORDER-LEFT: #cccccc 1px double; BORDER-BOTTOM: #cccccc 1px double’ width=’100%’ align=’center’>”
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
username = ds.Tables[0].Rows[i].U_Name;
tbStr+=“<tr onMouseover=\”javacript:className=’big-table-Mouseover’;this.style.cursor=’hand’\” onMouseout=\”javacript:className=’big-tableTR-White’\” style=’height: 18px;’ onclick=’javascript:selectIt(this)’>”;
tbStr+=“<td>”+username+“</td>”;
tbStr+=“</tr>”;
}
tbStr+=“</table>”
}else
{
}
disStr_TrueName=tbStr;
showUserInfo_TrueName_List();
}catch(exception)
{
}
}
}
//显示DIV
function showUserInfo_TrueName_List()
{
getAbsPoint();
document.all(“UserInfoListByNameDiv”).style.display=“block”;
document.all(“UserInfoListByNameDiv”).style.top=oTop1;
document.all(“UserInfoListByNameDiv”).style.left=oLeft1;
document.all(“UserInfoListByNameDiv”).style.width=oWidth1;
document.getElementById(“UserInfoListByNameDiv”).innerHTML=disStr_TrueName;
setTimeout(“clearUserInfo_TrueName_List();”,100000);//设置多少毫秒后自动隐藏DIV
}
//选择触发事件
function selectIt(obj)
{
clearUserInfo_TrueName_List();
txtAuthor=document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
txtAuthor.value = obj.firstChild.innerText;
}
//清除DIV
function clearUserInfo_TrueName_List()
{
document.all(“UserInfoListByNameDiv”).style.display=“none”;
}
document.write(“<div id=’UserInfoListByNameDiv’ style=’Z-INDEX:9999;LEFT: 1px; COLOR:#0066ff; border: 1 solid #000000; background:#dfffff;WIDTH: 200px; POSITION: absolute; TOP: 10px; HEIGHT: 40px;display:none’></div>”)
</script>

aspx页面控件：

HTML代码

户：<input name=“ctl00$ContentPlaceHolder1$txtUserName” type=“text” id=“ctl00_ContentPlaceHolder1_txtUserName” class=“inputbox” size=“10″ onkeyup=“showUserInfo_TrueName_List_callBack()” />