In this article I will explain with an example, how to implement Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net MVC 5 Razor.
The jQuery Bootstrap AutoComplete TextBox’s data will be populated from database using Entity Framework in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
 
 
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Model of the Customers Table of the Northwind Database which will be used later in this project.
Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net MVC Razor
 
 
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling the jQuery AutoComplete
This Action method accepts a parameter named “prefix”. When this method is accessed by the jQuery AutoComplete plugin, the records of the Customers Table of the Northwind database are fetched using the Entity Framework.
The fetched records are then filtered and returned back to the View as JSON.
 
Action method for handling POST operation
This Action method handles the Form submission and displays the Customer Name and CustomerId of the selected item in jQuery AutoComplete using ViewBag object. For more details on displaying message from Controller to View, please refer my article Display (Pass) String Message from Controller to View in ASP.Net MVC.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AutoComplete(string prefix)
    {
        NorthwindEntities entities = new NorthwindEntities();
        var customers = (from customer in entities.Customers
                            where customer.ContactName.StartsWith(prefix)
                            selectnew
                            {
                                label = customer.ContactName,
                                val = customer.CustomerID
                           }).ToList();
 
        return Json(customers);
    }
 
    [HttpPost]
    public ActionResult Index(string CustomerName, string CustomerId)
    {
        ViewBag.Message = "CustomerName: " + CustomerName + " CustomerId: " + CustomerId;
        return View();
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionNameName of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of three elements i.e. a TextBox (implemented as AutoComplete), a Hidden Field (for saving the Value part of the Autocomplete Item) and a Submit Button.
The Bootstrap jQuery TypeAhead AutoComplete plugin has been applied to the TextBox. A jQuery AJAX call is made to the Controller’s AutoComplete Action method and the list of customers returned acts as source of data to the Bootstrap jQuery TypeAhead AutoComplete.
The data received from the server is processed inside the jQuery AJAX call success event handler. A loop is executed for each received item in the list of items and then an object with text part in the name property and value part in the id property is returned.
When an item is selected from the AutoComplete List of the Bootstrap jQuery TypeAhead AutoComplete, then the updater event handler is triggered which saves the ID of the selected item to the Hidden Field element.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
            padding: 10pt;
        }
    </style>
</head>
<body>
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
          media="screen"/>
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
    <link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css"/>
    <script type="text/javascript">
        $(function () {
            $("#txtCustomer").typeahead({
                hint: true,
                highlight: true,
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            items = [];
                            map = {};
                            $.each(data, function (i, item) {
                                var id = item.val;
                                var name = item.label;
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height", "auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                updater: function (item) {
                    $('#hfCustomer').val(map[item].id);
                    return item;
                }
            });
        });
    </script>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="txtCustomer" name="CustomerName" class="form-control" autocomplete="off" style="width:300px"/>
        <input type="hidden" id="hfCustomer" name="CustomerId"/>
        <br/>
        <input type="submit" id="btnSubmit" value="Submit"/>
        <br/>
        <br/>
        @ViewBag.Message
    }
</body>
</html>
 
 
Screenshot
Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net MVC Razor
 
 
Downloads