How To Create Autocomplete TextBox In ASP.NET MVC 5

Here, we are going to implement Autocomplete TextBox, using jQuery and MVC 5. Simply follow the steps given below.

Step 1

Go to Microsoft Visual Studio 2015 and create a new empty MVC 5 project.

Step 2

Now, go to Controllers folder and add new empty HomeController.cs file. Paste the code given below.

HomeController.cs

usingJQueryAutoComplete.Models;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
namespaceJQueryAutoComplete.Controllers {
publicclassHomeController: Controller {
publicActionResult Index() {
returnView();
}
[HttpPost]
publicJsonResult Index(stringkeyword) {
//This can be replaced with database call.
List < Games > objGameList = newList < Games > () {
newGames {
Id = 1, GameName = "Cricket"
},
newGames {
Id = 2, GameName = "Football"
},
newGames {
Id = 3, GameName = "Chesh"
},
newGames {
Id = 4, GameName = "VallyBall"
},
newGames {
Id = 5, GameName = "Kabbadi"
},
newGames {
Id = 6, GameName = "Hockey"
}
};
var result = (from a inobjGameList where a.GameName.ToLower().StartsWith(keyword.ToLower()) select new {
a.GameName
});
returnJson(result, JsonRequestBehavior.AllowGet);
}
publicActionResult About() {
ViewBag.Message = "Your application description page.";
returnView();
}
publicActionResult Contact() {
ViewBag.Message = "Your contact page.";
returnView();
}
}
}

Step 3

Now, add a new class named Games.cs in Models folder. Add the code given below in it.

Games.cs

namespaceJQueryAutoComplete.Models {
publicclassGames {
publicintId {
get;
set;
}
publicstringGameName {
get;
set;
}
}
}

Step 4

Go to BundleConfig.cs and comment the lines given below.

usingSystem.Web;
usingSystem.Web.Optimization;
namespaceJQueryAutoComplete {
publicclassBundleConfig {
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
publicstaticvoidRegisterBundles(BundleCollection bundles) {
//bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
// "~/Scripts/jquery-{version}.js"));
//bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
// "~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(newScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(newScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));
bundles.Add(newStyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css"));
}
}
}

Step 5

Now, move to Home in View view folder and replace the code given below with Index.cshtml.

@model JQueryAutoComplete.Models.Games
@ {
ViewBag.Title = "Home Page";
} < linkrel = "stylesheet"
href = "//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" > < scriptsrc = "//code.jquery.com/jquery-1.11.2.min.js" > < /script> < scriptsrc = "//code.jquery.com/ui/1.11.2/jquery-ui.js" > < /script> < scripttype = "text/javascript" > $(document).ready(function() {
$("#GameName").autocomplete({
source: function(request, response) {
$.ajax({
url: "/Home/Index",
type: "POST",
dataType: "json",
data: {
keyword: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.GameName,
value: item.GameName
};
}))
},
error: function() {
alert('something went wrong !');
}
})
},
messages: {
noResults: "",
results: ""
}
});
}) < /script>
@using(Html.BeginForm()) {
@Html.AntiForgeryToken() < divclass = "form-horizontal" > < br / > < br / > < divclass = "form-group" > < divclass = "col-md-12" > < labelfor = "games" > Select Game: - < /label>
@Html.EditorFor(model => model.GameName, new {
htmlAttributes = new {
@class = "form-control"
}
}) < /div> < /div> < /div>
}

Note

You need to use jQuery library to perfom this example.