如何在MVC应用程序中实现谷歌搜索文本框？

Question

我有一个MVC应用程序。我根据文本框值有一个文本框我想在视图中列出从数据库到网格的搜索项而不回发。如果这个问题不对，我是MVC的新手，请帮助我。

Answer 1

如果您是ASP.NET MVC的新用户，我建议使用这些教程，它们是免费的。

http://www.asp.net/mvc/pluralsight

要回答您的问题，您需要执行以下操作（高级别）

1. 编写一些JavaScript / JQuery，使Ajax请求发送文本框值，这应该在稍微延迟后触发KeyUp事件，也是在输入x个数量字符后得到一些有意义的结果。

2. 此Ajax请求将调用Controller Action，您可以在其中执行数据库查找，这将返回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

<强>更新

1. 您的Javascript应该呈现结果，以便用户可以选择结果，这将填充文本框，然后用户可以单击搜索按钮，或者可以在没有最后一次单击的情况下触发，无论如何您将不得不重新绑定/使用所选的过滤器渲染网格，这必须是另一个AJAX请求。

您可能需要考虑使用其中一个来帮助进行数据绑定和AJAX调用

Flexigrid ：http://flexigrid.info/

jQuery Grid ：http://www.trirand.com/blog/

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

Ingrid ：http://reconstrukt.com/ingrid/

SlickGrid http://github.com/mleibman/SlickGrid

DataTables http://www.datatables.net/index