概述
利用最近刚学习的AJAX技术，实现google suggest功能
对键盘事件进行判断，判断按下键的键值，若按下的键为上下键，则转到执行上下键处理函数 catchKeyBoard();否则转到创建层和层的主体。
1.获取创建的层的绝对位置。
要获取创建的层的位置，必须先获取txt1的位置。在这里，我们定义一个函数来获取txt1的位置：
function getPosition( obj )
{
var top = 0,left = 0;
do
{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
2.创建层
function createMenu( textBox, menuid )
{
if( document.getElementById( menuid ) == null )
{
var left_new=getPosition( textBox )[1]
var top_new=getPosition( textBox )[0];
var newControl = document.createElement("div"); //创建层
newControl.id = menuid;
document.body.appendChild( newControl );
newControl.style.position = "absolute"; //确定为绝对路径
newControl.style.border = "solid 1px #000000"; //边框式样
newControl.style.backgroundColor = "#FFFFFF"; //颜色
newControl.style.width = textBox.clientWidth + "px"; //绝对宽度
newControl.style.left = left_new + "px"; //定位
newControl.style.top = (top_new + textBox.clientHeight + 2) + "px"; return newControl;
}
else
return document.getElementById( menuid );
}
3.创建层主体
首先定义数组：
var arr1=new Array("alizee","westlife","john","blue","colinton","angle");
var arr2=new Array("乔丹","科比","姚明","麦蒂","詹姆斯","雷科巴","R9","Chan","angle","orange","green","white","red","blue");
定义一个函数来取值：
function getSearchResult( key )
{
switch ( key )
{
case "a": //当输入a的时候显示arr1里面的数据
return arr1;
case "s": //输入s的时候显示arr2里面的数据
return arr2;
default:
return new Array();
}
}
正式创建层主体：
function createMenuBody( key )
{
var result = "";
var j = 0;
arr = getSearchResult( key ); //获取相应的数组
//最多显示十行数据
if(arr.length > 10)
{
j = 10;
}
else
{
j = arr.length;
}
for ( var i = 0; i < j; i++ ) //循环创建层的主体
result += "<table border=/"0/" cellpadding=/"2/" cellspacing=/"0/" id=/"menuItem"+(i+1)+"/" οnmοuseοver=/"forceMenuItem( "+(i+1)+");/" width=/"100%/" οnclick=/"givNumber("+i+")/"><tr><td align=/"left/">" + arr[i] + "</td><td align=/"right/">" + (i+1) + " </td></tr></table>";
return result;
}
4.获取鼠标事件：
lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )
if ( lastMenuItem != null )
{
lastMenuItem.style.backgroundColor="white";
lastMenuItem.style.color="#000000";
}
var menuItem = document.getElementById( "menuItem" + index );
if ( menuItem == null )
{
document.getElementById("txt1").focus();
}
else
{
menuItem.style.backgroundColor = "#5555CC";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
}
5.获取键被按下或放开事件：
Var keyNumber = event.keyCode;
if(keyNumber =='40')
{
if(menuFocusIndex == 10)
return true;
else if (menuFocusIndex == null) //当焦点在文本框中间时，按向下跳到第一个主体。
{
forceMenuItem( 1 );
givNumber( 0 );
}
else
{
forceMenuItem( menuFocusIndex+1 ); //焦点增加1
givNumber(menuFocusIndex-1);
}
}
else if(keyNumber == '38')
{
if(menuFocusIndex == 1)
{
forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时，按向上让它回到文本框。
}
else
{
forceMenuItem(menuFocusIndex-1); //焦点减少1
givNumber(menuFocusIndex-1);
}
}
6.通过键值来给文本框赋值：
function givNumber( index )
{
document.getElementById("txt1").value = arr[index];
document.getElementById("txt1").focus();
}
只是演示一个小例子，也没有实现数据库连接的功能， 直接用数组代替了，实现的效果和google suggest实现的效果是一样的，如果是连接数据库，就必须利用AJAX技术来实现异步回调，篇幅有限，不做过多介绍了。
最后
以上就是娇气哈密瓜为你收集整理的使用AJAX技术实现google suggest学习笔记的全部内容，希望文章能够帮你解决使用AJAX技术实现google suggest学习笔记所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复