In this article I will explain with an example, how to implement AutoComplete TextBox using AngularJS in ASP.Net MVC.
This article will illustrate how to use angucomplete-alt AutoComplete directive for implementing AutoComplete TextBox with records fetched from SQL Server database using AngularJS and 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.
 
 

Download angucomplete-alt Autocomplete Directive

In order to implement AutoComplete TextBox using AngularJS you need to download the angucomplete-alt AutoComplete directive from 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
 
 

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.
Note: For more details on how to configure and connect Entity Framework to database, 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.
 
Following is the Entity Data Model of the Customers Table of the Northwind Database which will be used later in this project.
Implement AutoComplete TextBox using AngularJS in ASP.Net MVC
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

This Action method handles the call made from the AngularJS AJAX function from the View.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
 
Inside this Action method, records from the Customers Table are fetched using Entity Framework and returned back as JSON object to the AngularJS AJAX function.
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

HTML Markup

Inside the View, the following JS file is inherited.

1. angular.min.js

 
The HTML of the View consists of:
div – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
div – For applying angucomplete-alt AutoComplete directive which has been assigned with following properties.

Properties

pause – This specifies the time (in milliseconds) to delay the process after the user stops typing before triggering a search.
local-data – It defines the local dataset used for AutoComplete suggestions.
search-fields – It defines the field in the local dataset for which the search will be performed.
title-field – It defines which field of data will be displayed as the title in the AutoComplete TextBox.
minlength – It defines the minimum number of character required to perform search.
The $http service is used to make an AJAX call to the Controller’s Action method.
The $http service has following properties and event handlers.

Properties

1. method – The method type of HTTP Request i.e. GET or POST.
2. url – URL of the Controller’s Action method.
3. datatype - The format of the data i.e. XML or JSON.
4. data – The parameters to be sent to the Controller’s Action method.
5. headers - List of headers to be specified for the HTTP Request.
 

Event Handlers

1. success – This event handler is triggered once the AJAX call is successfully executed.
2. error – This event handler is triggered when the AJAX call encounters an error.
The response from the AJAX call is received in JSON format is assigned to the Customers model variable inside the Success event handler of the $http service.
The returned list of Customers in JSON format is later used by the angucomplete-alt AutoComplete directive for implementing AutoComplete TextBox.
Finally, the selected Customer Name is displayed.
@{
     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.5.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',
                 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">
        </div>
        <hr />
         Selected Customer : {{SelectedCustomer.title}}
    </div>
</body>
</html>
 
 

Screenshot

Implement AutoComplete TextBox using AngularJS in ASP.Net MVC
 
 

Downloads

Download Code