How to create AutoComplete TextBox In ASP.NET MVC 5

Here we are going to implement Auto Complete TextBox using Jquery and Mvc 5. Simply follow following steps.

Step 1: Go to Microsoft Visual Studio 2015 and create a new empty MVC 5 project.
New Application
Step 2: Now go to Controllers folder and add new empty HomeController.cs file. And paste following give code.

Empty Controller

using JQueryAutoComplete.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JQueryAutoComplete.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            return View();
        public JsonResult Index(string keyword)
            //This can be replaced with database call.
            List<Games> objGameList = new List<Games>
                new Games {Id=1,GameName="Cricket" },
                new Games {Id=2,GameName="Football" },
                new Games {Id=3,GameName="Chesh" },
                new Games {Id=4,GameName="VallyBall" },
                new Games {Id=5,GameName="Kabbadi" },
                new Games {Id=6,GameName="Hockey" }

            var result = (from a in objGameList
                          where a.GameName.ToLower().StartsWith(keyword.ToLower())
                            select new { a.GameName });

            return Json(result, JsonRequestBehavior.AllowGet);

        public ActionResult About()
            ViewBag.Message = "Your application description page.";

            return View();

        public ActionResult Contact()
            ViewBag.Message = "Your contact page.";

            return View();

Step 3: Now add new class named Games.cs in Models folder. And add following code in to it.


namespace JQueryAutoComplete.Models
    public class Games
        public int Id { get; set; }
        public string GameName { get; set; }

Step 4: Go to BundleConfig.cs and comment following lines.

using System.Web;
using System.Web.Optimization;

namespace JQueryAutoComplete
    public class BundleConfig
        // For more information on bundling, visit
        public static void RegisterBundles(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 to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

            bundles.Add(new StyleBundle("~/Content/css").Include(

Step 5: Now move to Home in View view folder and replace the following code with Index.cshtml.

@model JQueryAutoComplete.Models.Games
    ViewBag.Title = "Home Page";
		<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"> </script>
<script type="text/javascript">
    $(document).ready(function () {
            source: function (request, response) {
                    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: ""

@using (Html.BeginForm())
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
                <label for="games">Select Game :-</label>
                @Html.EditorFor(model => model.GameName, new { htmlAttributes = new { @class = "form-control" } })</div>

Step 6: Compile the code and runt the application. You can now use AutoComplete in your application.
Running applicationSecon PageThird Page
Note : You need to use the Jquery library to perfom this example.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s