Wednesday, 22 June 2016

How to Implement Auto Complete Textbox using Angular js in MVC5

1 comment
Hi every one in this article i am going to explain about Auto complete text box using Angular JS.I might saw in some search engine and some websites while we are typing the first two letters of word it shows some suggested list to select.This Auto complete text boxes mostly used in real time projects to increase the user interactivity with site.Now in this post we gonna look at how it is implemented in Angular js.
For example see below google auto complete search box..

How to Implement Auto Complete Textbox using Angular js in MVC5
Here the suggested results will come based on the previous search results or most searched results.

Implementing Auto complete Textbox in Angular

To implement auto complete text box in Angular we need a angucomplete-alt directive.And  angucomplete dependency should be added to the angular application.In this application i am getting the data suggestion data from database table.
Steps to implement Auto complete text box..

Step 1: Create New Project.

Go to File --> New --> Project --> ASP.NET  Web Application under web section --> Entry Application Name --> Click OK --> Select Empty template --> Checked MVC -->click OK

Step 2: Add a Database to project.

Go to Solution Explorer --> Right Click on App_Data folder --> Add --> New item --> Select SQL Server Database Under Data --> Enter Database name --> Add.

Step 3: Create a table for store data

1.Open Database -->Right Click on Table folder --> Add New Table --> Add Columns --> Save --> Enter table name --> Ok.
2.In this tutorial I have created a table(Country) to store country list that will appear in the auto suggesstion list(This table contains CountryID,CountryName as columns).

Step 4: Add Entity Data Model.

1.Go to Solution Explorer -->Right Click on Project name form Solution Explorer --> Add --> New item --> Select ADO.net Entity Data Model under data --> Enter model name --> Add.
2.A popup window will come (Entity Data Model Wizard) --> Select Generate from database -->click Next
3.Chose your data connection --> select your database -->Select Entity framework version(5.0 or 6.0) next --> Select tables -->Enter Model Namespace name-->Click Finish.

Step 5: Add Angular reference files

1.Add below reference files in _Layout.cshtml page.(you can download this files from here angucomplete-alt.css and angucomplete-alt.js.
2.Add this files in <head> tag.
<!--Angualr refrence file for auto complete text box starts--><script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<link href="~/Content/angucomplete-alt.css" rel="stylesheet" />
<script src="~/Scripts/app.js"></script>
<!--Angualr refrence file for auto complete text box starts-->

Step 6: Add Controller 

1.Add Controller by right click on Controllers folder --> Add --> Controller -->name it as Home Controller
2.Replace the code with below code..
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularAutoCompleteTextbox.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult getAllCountries()
        {
            using (DatabaseEntities db = new DatabaseEntities()) {
                var countrylist = db.Countries.OrderBy(a => a.CountryName).ToList();
                return new JsonResult { Data=countrylist,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
            }
        }
    }
}
3.Index action is used to render the view.
4.getAllCountries method gets the data from database and sends it to the Angular Controller in Json format.

Step 7: Add Angular scripts to project

1.Right click Scripts folder --> Add Javascript file (i named it app.js).
2.Replace it with the below code..
var app = angular.module('myapp', ['angucomplete-alt']); //add angucomplete-alt dependency in app
app.controller('AutoCompleteController', ['$scope', '$http', function ($scope, $http) {
    $scope.Countries = [];
    $scope.SelectedCountry = null;
    //event fires when click on textbox
    $scope.SelectedCountry = function (selected) {
        if (selected) {
            $scope.SelectedCountry = selected.originalObject;
        }
    }
    //Gets data from the Database
    $http({
        method: 'GET',
        url: '/Home/getAllCountries'
    }).then(function (data) {
        $scope.Countries = data.data;
    }, function () {
        alert('Error');
    })
}]);
3.Here $scope.SelectedCountry stores the selected value in text box.$http service gets data from server.

Step 8: Add view to display UI

1.Right click Index action --> Add View --> name it --> Click Add.
2.Replace the code with below code in Index.cshtml page.
@{
    ViewBag.Title = "Mitechdev.com";
}
<div class="container">
    <h2>Autocomplete textbox in AngularJS</h2>
    <div ng-app="myapp">
        <div ng-controller="AutoCompleteController">
            <div angucomplete-alt id="txtAutocomplete" placeholder="Type country name" pause="100"
                 selected-object="SelectedCountry" local-data="Countries" search-fields="CountryName"
                 title-field="CountryName" minlength="1" input-class="form-control" match-class="highlight">
            </div>
            <!--display selected country-->
            <div ng-show="SelectedCountry">
                Selected Country : {{SelectedCountry.CountryName}}
            </div>
        </div>
    </div>
</div>
3.In div element we must add angucomplete-alt.we bind the data using local-data attribute.
4.After running the application we will get...

auto implement textbox using angular in mvc5

Download the source code from here-- Source code.

Conclusion

I hope this article may help you understand how to implement auto complete textbox using Angular JS in MVC 5.If you recommend any suggestion please contact me..


1 comment: