Hi folks, Here I am going to create a simple example of Autocomplete TextBox in ASP.NET MVC using Jquery.

Autocomplete Textbox in ASP.NET MVC using Jquery:

The Autocomplete widgets provide suggestions while you type into the field. In this session, I will explain to you how to create an Autocomplete Textbox in ASP.NET MVC using jquery.

Dependencies:

1- JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

2- CSS:

<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

Create Database and Tables:

 

CREATE TABLE [dbo].[Country](
[ID] [bigint] IDENTITY(1,1) NOT NULL,
[CountryName] [varchar](150) NULL
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

Insert Records:

INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (1, N'India')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (2, N'Sri lanka')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (3, N'Canada')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (4, N'Japan')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (5, N'Russia')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (6, N'United States')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (7, N'South Africa')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (8, N'Kenya')
GO
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (9, N'Bhutan')
GO
SET IDENTITY_INSERT [dbo].[Country] OFF
GO

Create ASP.NET MVC Application:

Step 1: Create an ASP.NET MVC application called AutoCompleteTextBoxDemo. Choose an empty basic template and proceed.

Step 2: I am using the Entity Framework so  First of all, we need to Install Entity Framework. Goto Tool > Library Package Manager > Manage NuGet Packages For Solutions.

Step 3: Right click on the Model folder and Create a class called Country. Replace the following code in the class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations.Schema;
namespace AutoCompleteTextBoxDemo.Models
{
[Table("Country")]
public class Country
{
public Int64 ID { get; set; }
public string CountryName { get; set; }
}
}

Step 4: Right Click on the Model folder and Create a class called CountryDbContext. Replace the following code in the class.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace AutoCompleteTextBoxDemo.Models
{
public class CountryDbContext:DbContext
{
public DbSet<Country> Country { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
Database.SetInitializer<CountryDbContext>(null);
base.OnModelCreating(modelBuilder);
}
}
}

Step 4: Add the following connection string in the web.config file.

<connectionStrings>
<add name=”CountryDbContext” connectionString=”data source=DESKTOP-CN5IQI9\SQLEXPRESS;Initial Catalog=Debugonweb;integrated security=True;” providerName=”System.Data.SqlClient” />
</connectionStrings>

Step 5: Right click on the Controller folder and create a Controller called HomeController. Replace the following code in the HomeController.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AutoCompleteTextBoxDemo.Models;
namespace AutoCompleteTextBoxDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
CountryDbContext objCountryDbContext = new CountryDbContext();

public ActionResult Index()
{
return View();
}
public JsonResult GetCountryList()
{
var vData = from c in objCountryDbContext.Country
select c.CountryName;
 
return Json(vData.ToList(), JsonRequestBehavior.AllowGet);
}
}
}

Step 6: Now we need to create a View. Right Click on the Index Action method and Create a view called Index.cshtml. Replace the following code.

@{
ViewBag.Title = "Index";
Layout = null;
}
<html>
<head>
<title>
Autocomplete Textbox in ASP.NET MVC
</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Home/GetCountryList",
data: null,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#txtCountry").autocomplete({ source: data });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error");
}
});
});
</script> 
</head>
<body>
<label>
Country
</label>
<input type="text" id="txtCountry" />

</body>
</html>

Now we are done with the development.

Output:

Autocomplete Textbox

View More:

Conclusion:

I hope this is a useful tutorial for you. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are always appreciated.

Thank You.

11 Comments