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

  1. usingJQueryAutoComplete.Models;
  2. usingSystem;
  3. usingSystem.Collections.Generic;
  4. usingSystem.Linq;
  5. usingSystem.Web;
  6. usingSystem.Web.Mvc;
  7. namespaceJQueryAutoComplete.Controllers {
  8. publicclassHomeController: Controller {
  9. publicActionResult Index() {
  10. returnView();
  11. }
  12. [HttpPost]
  13. publicJsonResult Index(stringkeyword) {
  14. //This can be replaced with database call.
  15. List < Games > objGameList = newList < Games > () {
  16. newGames {
  17. Id = 1, GameName = "Cricket"
  18. },
  19. newGames {
  20. Id = 2, GameName = "Football"
  21. },
  22. newGames {
  23. Id = 3, GameName = "Chesh"
  24. },
  25. newGames {
  26. Id = 4, GameName = "VallyBall"
  27. },
  28. newGames {
  29. Id = 5, GameName = "Kabbadi"
  30. },
  31. newGames {
  32. Id = 6, GameName = "Hockey"
  33. }
  34. };
  35. var result = (from a inobjGameList where a.GameName.ToLower().StartsWith(keyword.ToLower()) select new {
  36. a.GameName
  37. });
  38. returnJson(result, JsonRequestBehavior.AllowGet);
  39. }
  40. publicActionResult About() {
  41. ViewBag.Message = "Your application description page.";
  42. returnView();
  43. }
  44. publicActionResult Contact() {
  45. ViewBag.Message = "Your contact page.";
  46. returnView();
  47. }
  48. }
  49. }

Step 3

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

Games.cs
  1. namespaceJQueryAutoComplete.Models {
  2. publicclassGames {
  3. publicintId {
  4. get;
  5. set;
  6. }
  7. publicstringGameName {
  8. get;
  9. set;
  10. }
  11. }
  12. }
Step 4

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

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

Step 5

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

  1. @model JQueryAutoComplete.Models.Games
  2. @ {
  3. ViewBag.Title = "Home Page";
  4. } < linkrel = "stylesheet"
  5. 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() {
  6. $("#GameName").autocomplete({
  7. source: function(request, response) {
  8. $.ajax({
  9. url: "/Home/Index",
  10. type: "POST",
  11. dataType: "json",
  12. data: {
  13. keyword: request.term
  14. },
  15. success: function(data) {
  16. response($.map(data, function(item) {
  17. return {
  18. label: item.GameName,
  19. value: item.GameName
  20. };
  21. }))
  22. },
  23. error: function() {
  24. alert('something went wrong !');
  25. }
  26. })
  27. },
  28. messages: {
  29. noResults: "",
  30. results: ""
  31. }
  32. });
  33. }) < /script>
  34. @using(Html.BeginForm()) {
  35. @Html.AntiForgeryToken() < divclass = "form-horizontal" > < br / > < br / > < divclass = "form-group" > < divclass = "col-md-12" > < labelfor = "games" > Select Game: - < /label>
  36. @Html.EditorFor(model => model.GameName, new {
  37. htmlAttributes = new {
  38. @class = "form-control"
  39. }
  40. }) < /div> < /div> < /div>
  41. }


Note

You need to use jQuery library to perfom this example.