This article explains how to use the TextBox AutoComplete feature in MVC 4 using the Web API and jQuery.

Getting Started

Use the following procedure to get started:

New Project in Visual Studio 2012

Image 1.

This is my Portal database script.

  1. USE [Portal]
  2. GO
  3. /****** Object: Table [dbo].[Portal_Contacts] Script Date: 11/14/2013 09:13:44 ******/
  4. SET ANSI_NULLS ON
  5. GO
  6. SET QUOTED_IDENTIFIER ON
  7. GO
  8. CREATE TABLE [dbo].[Portal_Contacts](
  9. [ItemID] [int] IDENTITY(0,1) NOT NULL,
  10. [ModuleID] [int] NOT NULL,
  11. [CreatedByUser] [nvarchar](100) NULL,
  12. [CreatedDate] [datetime] NULL,
  13. [Name] [nvarchar](50) NULL,
  14. [Role] [nvarchar](100) NULL,
  15. [Email] [nvarchar](100) NULL,
  16. [Contact1] [nvarchar](250) NULL,
  17. [Contact2] [nvarchar](250) NULL,
  18. CONSTRAINT [PK_Contacts] PRIMARY KEY NONCLUSTERED
  19. (
  20. [ItemID] ASC
  21. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  22. ) ON [PRIMARY]
  23. GO

Now add a connection string in the web.config fle as in the following:

  1. <connectionStrings>
  2. <add name="PortalConnectionString" connectionString="Data Source=.;Initial Catalog=Portal;Integrated Security=True" providerName="System.Data.SqlClient" />
  3. </connectionStrings>

Now add model classes as in the following:

  1. public class PortalContacts
  2. {
  3. public int ItemId { get; set; }
  4. // public string Name { get; set; }
  5. public string Role { get; set; }
  6. //public string Email { get; set; }
  7. //public string Contact1 { get; set; }
  8. //public string Contact2 { get; set; }
  9. }

The following is my repository class:

  1. public class PortalContactsRepository
  2. {
  3. public IEnumerable<PortalContacts> GetContacts()
  4. {
  5. using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["PortalConnectionString"].ConnectionString))
  6. {
  7. connection.Open();
  8. using (SqlCommand command = new SqlCommand(@"SELECT [ItemID]
  9. ,[Name]
  10. ,[Role]
  11. ,[Email]
  12. ,[Contact1]
  13. ,[Contact2]
  14. FROM [Portal].[dbo].[Portal_Contacts]", connection))
  15. {
  16. // Make sure the command object does not already have
  17. // a notification object associated with it.
  18. command.Notification = null;
  19. if (connection.State == ConnectionState.Closed)
  20. connection.Open();
  21. using (var reader = command.ExecuteReader())
  22. return reader.Cast<IDataRecord>()
  23. .Select(x => new PortalContacts()
  24. {
  25. ItemId = x.GetInt32(0),
  26. // Name = x.GetString(1),
  27. Role = x.GetString(2),
  28. //Email = x.GetString(3),
  29. //Contact1 = x.GetString(4),
  30. //Contact2 = x.GetString(5)
  31. }).ToList();
  32. }
  33. }
  34. }
  35. }

Call the repository in the controller as in the following:

  1. using MvcApplication2.Models;
  2. public class ValuesController : ApiController
  3. {
  4. PortalContactsRepository objContacts = new PortalContactsRepository();
  5. // GET api/values
  6. public IEnumerable<PortalContacts> Get()
  7. {
  8. List<PortalContacts> plist = new List<PortalContacts>();
  9. plist = objContacts.GetContacts().ToList();
  10. return plist;
  11. }
  12. // GET api/values/5
  13. public string Get(int id)
  14. {
  15. return "value";
  16. }
  17. // POST api/values
  18. public void Post([FromBody]string value)
  19. {
  20. }
  21. // PUT api/values/5
  22. public void Put(int id, [FromBody]string value)
  23. {
  24. }
  25. // DELETE api/values/5
  26. public void Delete(int id)
  27. {
  28. }
  29. }

We are done with the models and controller part; now for the view as in the following:

  1. <header>
  2. <div class="content-wrapper">
  3. <div class="float-left">
  4. <p class="site-title">
  5. <a href="~/">Text Box Auto Complete Sample</a></p>
  6. </div>
  7. </div>
  8. </header>
  9. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  10. <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
  11. <div id="body">
  12. <input type="text" id="search" placeholder="Search for a Contact" required />
  13. <input type="submit" value="Go" id="submit" />
  14. </div>
  15. <script type="text/javascript">
  16. $('#search').autocomplete({
  17. source: function (request, response) {
  18. var autocompleteUrl = '/api/values';
  19. $.ajax({
  20. url: autocompleteUrl,
  21. type: 'GET',
  22. cache: false,
  23. dataType: 'json',
  24. success: function (json) {
  25. // call autocomplete callback method with results
  26. response($.map(json, function (data, id) {
  27. return {
  28. label: data.Role,
  29. value: data.ItemId
  30. };
  31. }));
  32. },
  33. error: function (xmlHttpRequest, textStatus, errorThrown) {
  34. console.log('some error occured', textStatus, errorThrown);
  35. }
  36. });
  37. },
  38. minLength: 2,
  39. select: function (event, ui) {
  40. alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);
  41. $('#search').val(ui.item.label);
  42. return false;
  43. }
  44. });
  45. </script>

Hit F5 to see the result.

AutoComplete Textbox in MVC
Image 2.
Select from AutoComplete Textbox in MVC

Image 3.