Post
Ask Question

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

  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.