java suggest_(转)实现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.创建层。

知道了要创建的层的位置，我们要创建一个层就很容易了。

functioncreateMenu( 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.创建层的主体

接下来当然是创建层的主体。在这里为了显示它的效果，我们先定义一些数组，从数组中取数据。

定义数组：

vararr1=new Array("alizee","westlife","john","blue","colinton","angle");

vararr2=new Array("信乐团","F4","TWINS","SHE","胡彦彬","周杰伦","刘若英","刘德华","angle","orange","green","white","red","blue");

定义一个函数来取值：

functiongetSearchResult( 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 += "

" + arr[i] + "

" + (i+1) + "

";

return result;

}

4.捕获鼠标事件。

客观的讲应该是获取层主体的焦点，当主体获取了这个焦点，那么它的颜色变为高亮色。当鼠标移到该主体的时候，它就获取了这个焦点，使该主体变为高亮。换一个角度来思考，变为高亮色这个事件也可以看做是由鼠标触发的。

因此用onmouseover事件来触发，触发函数forceMenuItem(index).

先定义一个变量 varmenuFocusIndex;它保存的是上一个高亮色的主体的值。触发鼠标事件时，我们将上一个高亮色的主体变为白色，将现在触发的主体变为兰色，就解决了这个问题。代码如下：

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技术完全得到实现。

开心过好每一天。。。。。