In this tutorial, I am going to explain you how to implement autocomplete textbox in asp.net mvc using jquery ajax. We will be using Visual Studio 2013.
Creating ASP.NET MVC Empty Application
Now the next step is to create ASP.NET MVC empty application as shown below.
Go to File → New → Project. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .
Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.
Now, a new project will be created as shown below.
Adding Models
Go to Models folder and add new class file Country.cs. Now replace all code with below code.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
namespaceWebApplication1.Models
{
public class Country
{
public int ID { get; set; }
public string Name { get; set; }
}
}
Adding Controller
Next step is to add controller to application. Go to controller folder and add new empty controller named as Home controller. Replace all code with below code.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
usingWebApplication1.Models;
namespaceWebApplication1.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult Index(string Prefix)
{
ListCountry> countryList = new ListCountry>()
{
new Country {ID=1,Name="India" },
new Country {ID=2,Name="USA" },
new Country {ID=3,Name="UK" },
new Country {ID=4,Name="Austraila" },
new Country {ID=5,Name="Nepal" },
new Country {ID=5,Name="Afghanistan" },
new Country {ID=5,Name="Albania" },
new Country {ID=5,Name="Andorra" },
new Country {ID=5,Name="Austria" }
};
var obj = from country in countryList
wherecountry.Name.StartsWith(Prefix, StringComparison.OrdinalIgnoreCase) // use StartsWith function
// where country.Name.ToLower().Contains(Prefix.ToLower()) // use contains function
select new { country.Name };
return Json(obj, JsonRequestBehavior.AllowGet);
}
}
}
Adding View
Now, right click on home controller index action method, add new view and name Index. Select Empty template and uncheck Use layout page and click on Add as shown below.
Now go to Views / Home folder, open Index.cshtml file and replace all code with below code. Here first 3 files are required files i.e jquery.js, jquery-ui.js, jquery-ui.css. And 4th file is bootstrap which is optional.
Index.cshtml Code:@model WebApplication1.Models.Country
!DOCTYPE html>
html>
head>
meta name="viewport" content="width=device-width" />
title>Indextitle>
script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript">script>
script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript">script>
link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
link href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
script type="text/javascript">
$(document).ready(function () {
$("#Name").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Index",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
