Autocomplete Textbox in ASP.NET using Jquery

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.

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:

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.

Debug On Web

Autocomplete TextBox in ASP.NET MVC using Jquery