實現google suggest技術過程總結

在

ivony

的指導下，我對

google

的google suggest

技術進行了相關的研究。並且取得了一定的成果，基本成功實現了它的功能。下面對其中用

js建立其顯示效果的控制項過程來個總結。

在這裡我先介紹一下實現該控制項的過程。我將這個過程為為幾個步驟來實現。

首先觸發txt1後，首先對鍵盤事件進行判斷，判斷按下鍵的鍵值，若按下的鍵為上下鍵，則轉到執行上下鍵處理函式 catchkeyboard();否則轉到建立層和層的主體。我們首先來討論建立層和層主體的問題。要建立層，首先我們要知道它的絕對位置。

1. 獲取建立的層的絕對位置。

要獲取建立的層的位置，必須先獲取txt1的位置。在這裡，我們定義乙個函式來獲取txt1的位置：

function getposition( obj )

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 )

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 ) }

完成上面這些準備工作後，我們可以正式來建立層的主體了。

function createmenubody( key )

else

for ( var i = 0; i < j; i++ ) //迴圈建立層的主體

result += "" + arr[i] + "

" + (i+1) + "

";return result;

}4. 捕獲滑鼠事件。

客觀的講應該是獲取層主體的焦點，當主體獲取了這個焦點，那麼它的顏色變為高亮色。當滑鼠移到該主體的時候，它就獲取了這個焦點，使該主體變為高亮。換乙個角度來思考，變為高亮色這個事件也可以看做是由滑鼠觸發的。

因此用onmouseover事件來觸發，觸發函式forcemenuitem(index).

先定義乙個變數 var menufocusindex;它儲存的是上乙個高亮色的主體的值。觸發滑鼠事件時，我們將上乙個高亮色的主體變為白色，將現在觸發的主體變為蘭色，就解決了這個問題。**如下：

lastmenuitem = document.getelementbyid( "menuitem" + menufocusindex )

if ( lastmenuitem != null )

var menuitem = document.getelementbyid( "menuitem" + index );

if ( menuitem == null )

else

5.捕獲上下鍵事件

接下來我們解決捕獲上下鍵的問題。這裡面乙個容易混淆的地方就是，該事件的觸發是由txt1來觸發的，而不是由層的主體來觸發的。事實上圍繞這個問題我在實現過程中也走了不少彎路。

前面我有提到，在觸發txt1時即進行判斷，如果是上下鍵即轉到上下鍵處理函式catchkeyboard()。而不是到建立層。在該函式中，我們也可以呼叫滑鼠事件函式（確切的講是呼叫獲取焦點函式）。

var keynumber = event.keycode;

if(keynumber =='40') //向下

else }

else if(keynumber == '38')//向上

else }

6. 按上下鍵時給文字框賦對應的值。

注意到建立層的主體時定義的當前陣列的值。就很容易完成這個函式了。

function givnumber( index )

到這裡，該控制項的主體就基本上完成了，執行，在文字框分別輸入a和s，可以發現它和google suggest的效果是一樣的。當然，接下來還要利用ajax技術進行非同步**，輸入查詢值的時候由後台從資料庫返回查詢的數值，做成陣列的形式。當然這些簡單的步驟我在這裡就不多說了。至此，google suggest技術完全得到實現。

實現google suggest技術過程總結

使用者控制項實現Google Suggest

快速排序演算法實現（遞迴實現棧實現）

介面實現與配置實現

實現google suggest技術過程總結

使用者控制項實現Google Suggest

快速排序演算法實現（遞迴實現 棧實現）

介面實現與配置實現

相關推薦

快速排序演算法實現（遞迴實現棧實現）