2013-10-18 藍藍設計的小編
轉載藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://sudasuta.com/cooler-photo.html
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
近來積累了一些關于自動完成的應用方式，今天將其擴展延伸并整理了些常見的應用方法供大家一起學習。
“自動完成”的設計思路源自于Poka-yoka預防機制。是一種自動糾偏方法，在生產中用以防止人為失誤發展成為最終產品缺陷。
網頁設計中自動完成在輸入框的應用已很廣泛，屬于反應性界面的強大模式。能夠嘗試猜測用戶輸入的文字，并且動態的搜索出適配的結果并推薦給用戶，輔助完成輸入。目的是避免用戶打錯字，起到提示作用，智能預測用戶心理期望，從而確保他們的搜索更有效率。
優點：
“自動完成”輸入框能預防錯誤。用戶經常在輸入幾個字的情況下就能在推薦列表中發現正確的名稱，而不會因為筆誤找不到適配的搜索結果。
防止用戶為已經在存在于數據中的名稱創建多條數據庫記錄。
這種輸入框列出的搜索結果不會分頁。因為搜索結果是隨著輸入的文字增加而變化的，所以就在當前頁面中。因此完全沒有必要點開“下一頁”，查看其余的結果。
這個功能的靈活性使用戶更加信任這個網站，使事情變得簡單可依賴。雖然這個功能有很多值得夸贊的地方，但它也同樣有一些局限性。
局限性：
當用戶搜索一些小范圍的數據時，例如某個學科的分支目錄，他會很有用，但是對于在google和yahoo 這樣的網站中進行廣域搜索的用戶來說，并不一定有用。
首先，那些盯著鍵盤輸入文字的用戶通常注意不到推薦列表，雖然已經把一切都送到眼前，他們還是看不到。有些人偶爾會在輸入完想要的內容后抬頭才發現推薦列表，但他們往往都是敲了回車鍵才抬頭，所以根本沒看清楚列表里面是什么。
其次，用戶會因為推薦而放棄自己先前的主張，但其實他們自己想輸入的文字很可能比推薦的詞匯更加有效。原因是用戶認為系統推薦的將會產生更有效的結果，也有可能他們認為這些搜索詞是開發者希望他們使用的詞匯。
“冷啟動”是個問題，也即最初可能沒有任何用戶行為數據。這時候需要結合熱點挖掘的方式給用戶一個最初的感受，不過需要很好的把控質量，并進行灰度放量，AB test。
suggest的一些質量評測點：
1. 垃圾詞過濾。比如帶無意義符號的查詢串要進行處理。
2. 意義重復的query，比如“天上人間照片”和“天上人間的照片”屬于同意。
3. 在去重復基礎上考慮多樣性。
4. 匹配模式，前綴匹配、后綴匹配。
5. 中英文（拼音）混合串的質量。
6. 錯別字智能糾錯。
7. 政治、黃詞、零結果等的過濾。
8. 新聞類檢索需要引入時新性。
9. 如果有類似阿拉丁的直達區，考慮直達區策略以及展示樣式。
10. 數據方面主要看CTR。但是要注意，用戶只要輸入query，就會調用suggestion，多一個查詢詞，suggest就又檢索一次，如果以單純的檢索量做分母是不合適的。應該以一次完整的檢索行為作為分母，以點擊提示詞的次數為分子。
Google suggest是Google搜索引擎最重要的人性化服務之一，即在搜索欄輸入框內使用了此功能，使用戶在輸入搜索關鍵詞時能及時調整關鍵詞推薦列表，以 獲得最需要的搜索結果。其中通過各種搜索請求的流行度來確定這些預測推薦請求的排列順序等。目前中國的版本已經沒有這個功能了。
A fancy Apple.com-style search suggestion (演示地址)
這是一個使用HTML/CSS，jQuery，MySQL PHP等技術實現的Search Suggestion。
這個Mootools插件能夠將普通的文本輸入框，轉換成擁有Autocomplete功能風格類似于Facebook的文本輸入框。支持任意類型的數據源（XHR、Json）。
Tokenizing Autocomplete Text Entry (演示地址)
一個jQuery插件能夠讓用戶從一個預設的列表中,選擇多個項目。并提供Autocompletion功能來幫助用戶搜索項目。支持通過CSS控制和定制布局。能夠緩存搜索結果減少服務器加載次數。支持用鼠標或鍵盤來選擇項目。提供平滑的動畫數據加載效果。
有道為suggest添加三欄顯示、網頁預覽等功能，幫助用戶更快的找到答案。在優酷等視頻網站中也有此功能。
參考文獻
<瞬間之美>
http://paranimage.com/33-javascript-autocomplete-scripts/
http://www.zhihu.com/question/19571974