如何在MVC應用程序中實現谷歌搜索文本框？

Question

我有一個MVC應用程序。其中我有一個文本框根據文本框的值我想列出從數據庫搜索項目到網格在視圖中沒有回傳。如果這個問題是錯誤的，我是MVC的新手，請更正我。

Answer 1

如果你是新來的ASP.NET MVC我建議這些教程，他們是免費的。

​​

要回答你的問題，你需要做以下（高電平）

1. 寫一些JavaScript/JQuery的，使一個Ajax請求發送的文本框的值，這應該開槍KeyUp事件稍微延遲一段時間後，也輸入x數量字符後獲得一些有意義的結果。

2. 該Ajax請求將調用一個控制器操作，您可以在其中執行數據庫查找，這將返回JSON。

3. 你的JavaScript應該呈現的結果，使用戶可以選擇一個結果，這將填充文本框，然後用戶可以點擊搜索按鈕進行搜索

http://jqueryui.com/autocomplete是一個插件，可以做大部分我上面提到的客戶端功能。

這是一個很好的ASP.NET MVC AJAX教程：

http://pluralsight.com/training/players/PSODPlayer?author=scott-allen&name=mvc3-building-ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro

UPDATE

1. 你的JavaScript應該呈現的結果，使用戶可以選擇一個結果，這將填充文本框，然後用戶可以點擊搜索按鈕，或者這可以在沒有最後一次點擊的情況下被觸發，無論如何，你將不得不重新綁定/渲染你應用的選定過濾器的網格，這必須是另一個AJAX請求。

你可能要考慮使用的這些人幫助與數據綁定和AJAX調用

Flexigrid：http://flexigrid.info/

jQuery的電網：http://www.trirand.com/blog/

jqGridView ：http://plugins.jquery.com/project/jqGridView

英格麗：http://reconstrukt.com/ingrid/

SlickGridhttp://github.com/mleibman/SlickGrid

數據表http://www.datatables.net/index