How do you implement an auto-updating search box so that the names appear as you type?

Question

I have an index page where a table is generated with rows of information from the DB.

I have successfully integrated Tom Dykstra's method of adding a search box using this tutorial: http://www.asp.net/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

How would I implement behavior that shows names that already exist as they are being typed in the search box, or automatically update the rows in the table as something is typed into the search box?

I am using MVC 5 with EF6.

Thank you!

Answer 1

我会使用带有远程数据源的jQuery UI Autocomplete小部件。 https://jqueryui.com/autocomplete/#remote

对于远程源，要么在您的控制器上写一个返回JSON的新操作，要么执行相同的WebAPI操作，并在那里对您的数据库进行查询以查找用户查询的匹配结果

Answer 2

The best way to do this would be to use AngularJs. We can't give you a full example of this, I can only give you an approach. Angular is very powerful and as well it is client side which speeds up you application very much. See the example shown in the docs of angular. You can use the filtering on everything (tables, divs, list etc.)

https://docs.angularjs.org/api/ng/filter/filter

Here is an example of how to implement AngularJS in Asp.Net MVC.

http://www.codeproject.com/Articles/806029/Getting-started-with-AngularJS-and-ASP-NET-MVC-Par

Here is also an JSFiddle example on how it can look like:

http://jsfiddle.net/mikeeconroy/QL28C/1/

styles.min.css

This code snippet would do the filtering for you