Post
Ask Question

AutoComplete Textbox Using Typeahead JS In ASP.NET MVC

Here, in this post, we will discuss the Typeahead JS plugin which is used for Autocomplete textbox. It is somewhat better than jQuery UI which is also used for autocomplete textbox. But the problem with jQuery UI is that we have to manage the sequence, as two files are there for it, while in Typeahead only one file is used so no headache for managing sequence.

We have to include the following CDN for Typeahead, 
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  

We are going to use the code first approach for it. If you are not familiar with it than you can see the article on Code First Approach

Now I assume that you know about the Code First Approach so we'll directly dive towards integrating Typeahead.

So first we start with the _Layout file. Include the typeahead js reference in it.

  1. <!DOCTYPE html>     
  2. <html>    
  3.    <head>    
  4.       <meta charset="utf-8" />    
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  6.       <title>@ViewBag.Title - My ASP.NET Application</title>    
  7.       @Styles.Render("~/Content/css")   
  8.       @Scripts.Render("~/bundles/modernizr")  
  9.       @Scripts.Render("~/bundles/jquery")       
  10.       @Scripts.Render("~/bundles/bootstrap")   
  11. <script src="~/Scripts/bootstrap3-typeahead.min.js"></script>     
  12.    </head>    
  13.    <body>    
  14.       <div class="navbar navbar-inverse navbar-fixed-top">    
  15.          <div class="container">    
  16.             <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div>    
  17.             <div class="navbar-collapse collapse">    
  18.                <ul class="nav navbar-nav">    
  19.                   <li>@Html.ActionLink("Home", "Index", "Home")</li>    
  20.                   <li>@Html.ActionLink("About", "About", "Home")</li>    
  21.                   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>    
  22.                </ul>    
  23.             </div>    
  24.          </div>    
  25.       </div>    
  26.       <div class="container body-content">    
  27.          @RenderBody()     
  28.          <hr />    
  29.          <footer>    
  30.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>    
  31.          </footer>    
  32.       </div>    
  33.       @RenderSection("scripts", required: false)     
  34.    </body>    
  35. </html>     
Now navigate to View -> Home -> Index.cshtml,
  1. @{ ViewBag.Title = "Home Page"; }     
  2. <div class="row">    
  3.    <div class="form-group col-md-5"> <input type="text" id="select" class="form-control" /> </div>    
  4.    <div class="form-group col-md-5"> <input type="text" id="update" disabled class="form-control" /> </div>    
  5. </div>    
  6.     
  7. <script>    
  8.     
  9. $("#select").typeahead({    
  10.             minLength: 1,    
  11.             source: function (request, response) {    
  12.                 $.ajax({    
  13.                     url: "/Home/GetList/",    
  14.                     data: {    
  15.                         "name": request    
  16.                     },    
  17.                     type: "GET",    
  18.                     contentType: "json",    
  19.                     success: function (data) {    
  20.                         items = [];    
  21.                         map = {};    
  22.                         $.each(data, function (i, item) {    
  23.                             var id = item.Name;    
  24.                             var name = item.Name;    
  25.                             map[name] = {    
  26.                                 id: id,    
  27.                                 name: name    
  28.                             };    
  29.                             items.push(name);    
  30.                         });    
  31.                         response(items);    
  32.                     },    
  33.                     error: function (response) {    
  34.                         alert(response.responseText);    
  35.                     },    
  36.                     failure: function (response) {    
  37.                         alert(response.responseText);    
  38.                     }    
  39.                 });    
  40.             },    
  41.             updater: function (item) { //If simultaneously want to update value somewhere else $("#update").val(map[item].id); return item; } });    
  42.     
  43. </script>     
We are going to use a Typeaheads table.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using TypeaheadJSDemo.Models;  

  8. namespace TypeaheadJSDemo.Controllers {  

  10.  public class HomeController: Controller {  

  12.   private readonly Context _context = new Context();  

  14.   public ActionResult Index() {  
  15.    return View();  
  16.   }  

  18.   public JsonResult GetList(string name) {  
  19.    var list = _context.TypeAheads.Where(x => x.Name.StartsWith(name)).Take(10).ToList();  
  20.    return Json(list, JsonRequestBehavior.AllowGet);  
  21.   }  
  22.  }  
  23. }  
We will only take the first 10 matching data rather than all data.
 
Please give your valuable feedback/comments/questions about this article below. Please let me know how you like and understand this article and how I could improve it.


Similar Articles