如何使用Dojo實現實時搜索/搜索建議？

Question

我想在使用Dojo框架的Web應用程序中實施「實時搜索」或「搜索建議」功能。這與您鍵入時Google和Bing搜索顯示匹配的方式類似：當您在搜索框中鍵入時，下面會顯示可能匹配的列表。搜索將在服務器端執行，並使用AJAX將結果發送回瀏覽器。

有誰知道使用Dojo實現這個功能的好方法嗎？

這裏有一些可能的備選方案：

• 內置插件dijit.form.ComboBox
  這具有非常類似的功能，但我只看到它與有限的數據使用。這些示例總是使用小列表（例如美國的50個州），並預裝全部數據集以進行客戶端過濾。不過，我認爲我可以將它連接到一個dojox.data.JsonQueryRestStore進行服務器端搜索 - 任何人都可以確認它是否有效？

• QueryBox http://marumushi.com/code/querybox/
  這個實現主要做的工作，但它有一些小錯誤，不看像它的維持。在使用它之前，我必須對代碼進行一些錯誤修正。

• Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
  這也像它的工作，但它被描述爲「alpha級」代碼和鏈接代碼似乎被打破......

我可能會做出上述工作之一，但我想知道是否有更好的選擇。

Answer 1

我5年前來實現它，當道場爲0.2：

• http://www.lazutkin.com/blog/2005/12/23/live-filtering/

雖然代碼是古老的，它是平凡的，並希望這會給你的想法如何攻擊它。畫稿：

• 附加一個事件處理程序到你的輸入框，這是引發上改變—使用「的onkeyup」，以檢測輸入框的變化。
• 等待用戶停止鍵入，方法是在事件處理函數中設置一個計時器，如果尚未設置。 200-500ms是很好的等待時間。
  • 超時扮演着雙重角色：
    • 它扼殺了我們的服務器，以防止過載請求。
    • 它影響我們對時間和我們打字習慣的看法。
• 如果我們超時了，我們不等待服務器⇒服務器發送一個字符串，我們至今。
• 如果我們還在等待服務器，請取消請求並再次詢問。
  • 這部分是特定於應用程序的：我們不希望超載服務器，有時服務器不能很好地處理斷開的連接。
  • 在示例中，我不取消XHR呼叫，但在提交新請求之前先等待它完成。
• 服務器響應相關結果，並立即顯示。

在博客文章中，我將它作爲一個小部件實現。很明顯，確切的包裝取決於你。