How To Create Autocomplete TextBox In ASP.NET MVC 5

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.