From Gossip@caterpillar

Ajax Gossip: 自動完成

想知道什麼是自動完成(Auto Complete),可以試著在 Google Suggest 打幾個字就知道了,事實上這個功能在桌面應用程式很常見,像是字典查詢程式。

其基本原理就是,當您在打字時觸發鍵盤事件,例如onkeyup事件,向伺服端發出非同步請求…


例如打了一個a,接著伺服端從資料庫查詢出a開頭的所有資料,然後傳回至客戶端,客戶端此時執行callback函式,將結果以一個表格來模擬下拉式選單,顯示出所有可能的建議選項…


接著使用者可以從中選擇選項,利用滑鼠事件,將使用者選擇的項目放置至輸入欄位中…

就某些程度來說,這有些類似 動態清單 ,只不過這次是以每個使用者鍵入的文字來查詢,而不是下拉式選單中加以設定的選項,而且為了美觀,會需要使用DOM、CSS等,將畫面模擬的跟視窗程式中的選單畫面一樣。

而且您必須考慮到打字者打字速度的問題,如果有個使用者打字速度很快,一秒鐘可以按下鍵盤10次,那就是一秒鐘發出10次請求,那麼以像Google這樣 百萬人次的伺服端來說,處理請求的負擔會很重,您可以在客戶端設定,大概一秒鐘(或一個您覺得適當的時間)才將使用者目前已鍵入的文字送出至伺服端查詢。

因為使用者查詢的資料可能在上一次請求傳回的結果集合中,所以另一個減少向伺服端請求的方法之一,就是將上次查詢到的資料快取一份在客戶端,如果使用者繼續鍵入文字,那麼先在快取中查詢是否有符合的,如果有的話就直接用,如果沒有再向伺服端查詢。

程式撰寫起來會有些複雜,有些程式庫或框架,就直接提供有自動完成的元件,您只有略為遵守元件的規範(例如回應的XML格式),就可以擁有自動完成的功能。

事實上,手工編寫Ajax應用程式實在很辛苦,有一個好用的程式庫或框架,對於撰寫Ajax應用程式來說是絕對必要的,在了解Ajax基本原理之後,接下來就是選擇適合的程式庫與框架。