In this article I will explain with an example, how to implement AutoComplete TextBox using AngularJS in ASP.Net MVC Razor.
This article will illustrate how to use angucomplete-alt AutoComplete Directive for implementing Database driven AutoComplete TextBox using AngularJS and Entity Framework in ASP.Net MVC Razor.
 
 
Download angucomplete-alt Autocomplete Directive
The angucomplete-alt AutoComplete Directive can be downloaded from GitHub using the following link.
Download angucomplete-alt
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
Implement AutoComplete TextBox using AngularJS in ASP.Net MVC
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling AngularJS AJAX operation
This Action method handles the call made from the AngularJS AJAX function from the View.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
 
Inside this Action method, records from the Customers Table are fetched and returned to the AngularJS client.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult GetCustomers()
    {
        using (NorthwindEntities entities = new NorthwindEntities())
        {
            return Json((from c in entities.Customers
                            select new { ContactName = c.ContactName }).ToList());
        }
    }
}
 
 
View
The View HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The JS and CSS files for the angucomplete-alt AutoComplete Directive are inherited and the angucomplete-alt AutoComplete Directive dependency has been added to the AngularJS app.
The $http service has been used to make AJAX call to the Action method, the returned list of Customers in JSON format is assigned to the Customers model variable which is later used by the angucomplete-alt AutoComplete Directive for implanting AutoComplete TextBox.
Note: If you want to learn more $http service, please refer my article Call MVC Controller from AngularJS using AJAX and JSON in ASP.Net MVC.
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/AnguAutoComplete/angucomplete-alt.js"></script>
    <link href="~/AnguAutoComplete/angucomplete-alt.css" rel="stylesheet"/>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angucomplete-alt'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = null;
            $scope.SelectedCustomer = null;
 
            var post = $http({
                method: "POST",
                url: "/Home/GetCustomers",
                dataType: 'json',
                data: {},
                headers: { "Content-Type": "application/json" }
            });
 
            post.success(function (data, status) {
                $scope.Customers = data;
            });
 
            post.error(function (data, status) {
                $window.alert(data.Message);
            });
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div angucomplete-alt id="txtCustomers" placeholder="Customer Name" pause="100" selected-object="SelectedCustomer"
             local-data="Customers" search-fields="ContactName" title-field="ContactName"
             minlength="1" input-class="form-control" match-class="highlight">
        </div>
        <hr/>
        Selected Customer : {{SelectedCustomer.title}}
    </div>
</body>
</html>
 
 
Screenshot
Implement AutoComplete TextBox using AngularJS in ASP.Net MVC
 
 
Downloads
Download Code