In this article I will explain with an example, how to implement AutoComplete TextBox using AngularJS in ASP.Net Web Forms using C# and VB.Net.
This article will illustrate how to use angucomplete-alt AutoComplete Directive for implementing Database driven AutoComplete TextBox using AngularJS in ASP.Net Web Forms with C# and VB.Net.
 
 
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
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
 
 
WebMethod for fetching AutoComplete data from Database
The following WebMethod will be called using AngularJS client.
Inside this WebMethod, records from the Customers Table are fetched and are inserted into a Generic List of Objects.
Finally, the Generic List is returned to the AngularJS client.
C#
[WebMethod]
public static List<object> GetCustomers()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT ContactName FROM Customers";
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            List<object> customers = new List<object>();
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(new { ContactName = sdr["ContactName"] });
                }
            }
            con.Close();
            return customers;
        }
    }
}
 
VB.Net
<WebMethod()>
Public Shared Function GetCustomers() As List(Of Object)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT ContactName FROM Customers"
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query, con)
            Dim customers As List(Of Object) = New List(Of Object)()
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(New With {
                    .ContactName = sdr("ContactName")
                })
                End While
            End Using
            con.Close()
            Return customers
        End Using
    End Using
End Function
 
 
Implementing AutoComplete TextBox using AngularJS in ASP.Net Web Forms
The below 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 WebMethod, 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 Using AngularJS $http service in ASP.Net.
 
<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: "Default.aspx/GetCustomers",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
 
        post.success(function (data, status) {
            $scope.Customers = data.d;
        });
 
        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>
 
 
Screenshot
Implement AutoComplete TextBox using AngularJS in ASP.Net Web Forms using C# and VB.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code