2008-12-08 149 views
7

例如,如果您在Firefox右上角的google/yahoo搜索框中鍵入內容,則會出現某種「建議自動完成」的事情。自動填充建議如何工作?

另一個示例是在youtube搜索框和Stackoverflow標記編輯框下方的這個問題預覽。他們如何工作?他們背後有什麼技術?

回答

7

這是使用AJAX完成的,本網站有一個很好的教程: AJAX Suggest Tutorial,和WaybackMachine version, as website seems down

據我所知,一個包含關鍵字和一點代碼的數據庫就是它的全部。

我正在學習如何使用它,現在工作。 :)

另一個資源是w3schools。他們也覆蓋了它。

+0

我明白這是從9年前的一個答案,但它是一個爲什麼不應該只是鏈接教程一個很好的例子。現在,該網站已關閉:(此問題在'如何自動完成作品'中排名第一# – Veehmot 2017-11-14 23:19:07

3

他們使用JavaScript正常:

  • 考慮所有可能的值的局部數組
  • 請求另一頁(即/autocomplete.php?q=partialText)在後臺運行。
  • 調用webservice。

當JavaScript有條目列表來顯示它時會修改頁面以顯示自動填充框。

如果你想在你的網站上放一個自動填寫框,我已經使用並發現以下內容非常好。它也基於流行的jQuery框架。

jQuery autocomplete plugin

0

有儘可能多的回答這個,因爲有他們的不同實現。我們的AutoCompleter可以在Stacked中看到一個示例,它通過引發一個事件,然後在.ASPX頁面的代碼隱藏處理中進行處理,您可以使用您希望的任何控件填充ControlCollection。然而,我們只是使用文字內容作爲錨鏈接的文字控件進行堆疊。但我們可以添加複選框或圖像,如果我們想...

如果你在ASP.NET上我們的AutoCompleter是一個很好的開始。如果你在「別的東西」,那麼可能ScriptAculous AutoCompleter是另一個不錯的開始...

2

這很簡單。

客戶端:在表單字段

  1. 搶按鍵
  2. 擊鍵使一個AJAX請求到服務器
    1. 如果立即進入另一個按鍵,取消目前的AJAX請求,因爲它現在已經過時了
    2. 在表單域中創建一個新的AJAX請求以更新字符
  3. 顯示服務器響應客戶端

服務器端:

  1. 所有的話都已經按字母順序
  2. 分時段如果客戶端請求進入「奧雅納」找到所有單詞開始與奧雅納,依熱門程度排序
  3. 返回頂部匹配客戶
1

有一個在碎雜誌文章(以下鏈接)一個優秀的開源國家選擇,其中包括了可用性的討論與普通自動完成解決方案挑戰,並修復它們。

雖然我是用戶體驗而不是開發人員,但我確定一個聰明的開發人員可以調整這個開源代碼來處理其他類型的選擇 - 而不僅僅是國家的名稱。 :)

聲明:我沒有任何聯繫誰做這個國家選擇的人。我只是碰巧知道它,我喜歡與開發人員FWIW分享有關可用性的信息。

0

我最近也在研究自動完成功能,我們使用lucene來索引要在自動完成中顯示的文本。用lucene搜索很快。有些事情看的和自動完成數據時:

  1. 的建議新鮮感,
  2. 依賴於長期數據,
  3. 地區的依賴,
  4. 語言依賴
3

什麼技術落後於他們?

如果你想知道正在使用的數據結構之下則其稱爲「特里」和比較嘗試,你可以使用「DAFSA」

如何用更少的空間他們工作?

二者都被實現爲樹,其中樹的每個節點對應於一個字符串中的一個字符並且之前出現的字符是稍後出現的字符的父親。存儲在Trie(左)和DAFSA(右)中的字符串「tap」,「tap」,「top」和「tops」,以便您開始鍵入tap..樹會根據鍵入的字符並根據分配給每個詞的一些權重顯示建議,權重可以基於詞的使用頻率來分配。在最壞的情況下

The strings "tap", "taps", "top", and "tops" stored in a Trie (left) and a DAFSA (right), EOW stands for End-of-word.

仰視字符串是O(M)時,其中m是串的長度。

圖像從維基百科的articel引用:DAFSAtrie

相關問題