实现google suggest技术过程总结
在这里我先介绍一下实现该控件的过程。我将这个过程为为几个步骤来实现。
首先触发txt1后，首先对键盘事件进行判断，判断按下键的键值，若按下的键为上下键，则转到执行上下键处理函数 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;
}
通过该函数获取txt1的位置为（top，left），则依附txt1创建的层的位置为(top+textbox.clientheight，left),，宽度和txt1相同。
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"; //注意，将此高度加2是为了解决JS出现的非自然因素…
return newControl;
}
else
return document.getElementById( menuid );
}
3. 创建层的主体
接下来当然是创建层的主体。在这里为了显示它的效果，我们先定义一些数组，从数组中取数据。
定义数组：
var arr1=new Array("alizee","westlife","john","blue","colinton","angle");
var arr2=new Array("信乐团","F4","TWINS","SHE","胡彦彬","周杰伦","刘若英","刘德华","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)+"\" onmouseover=\"forceMenuItem( "+(i+1)+");\" width=\"100%\" onclick=\"givNumber("+i+")\"><tr><td align=\"left\">" + arr[i] + "</td><td align=\"right\">" + (i+1) + " </td></tr></table>";
return result;
}
4. 捕获鼠标事件。
客观的讲应该是获取层主体的焦点，当主体获取了这个焦点，那么它的颜色变为高亮色。当鼠标移到该主体的时候，它就获取了这个焦点，使该主体变为高亮。换一个角度来思考，变为高亮色这个事件也可以看做是由鼠标触发的。
因此用onmouseover事件来触发，触发函数forceMenuItem(index).
先定义一个变量 var menuFocusIndex;它保存的是上一个高亮色的主体的值。触发鼠标事件时，我们将上一个高亮色的主体变为白色，将现在触发的主体变为兰色，就解决了这个问题。代码如下：
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.捕获上下键事件
接下来我们解决捕获上下键的问题。这里面一个容易混淆的地方就是，该事件的触发是由txt1来触发的，而不是由层的主体来触发的。事实上围绕这个问题我在实现过程中也走了不少弯路。
前面我有提到，在触发txt1时即进行判断，如果是上下键即转到上下键处理函数catchKeyBoard()。而不是到创建层。在该函数中，我们也可以调用鼠标事件函数（确切的讲是调用获取焦点函数）。
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();
}
到这里，该控件的主体就基本上完成了，运行，在文本框分别输入a和s，可以发现它和google suggest的效果是一样的。当然，接下来还要利用AJAX技术进行异步回调，输入查询值的时候由后台从数据库返回查询的数值，做成数组的形式。当然这些简单的步骤我在这里就不多说了。至此，google suggest技术完全得到实现。