I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 25::How to make textbox as autocomplete using angularjs in MVC 5 without jquery ?

Today i am going to explain about Auto complete textbox using Angular JSin MVC 5.I may found in some web index and a few sites while we are writing the initial two letters of word it demonstrates some proposed rundown to select.This Auto complete content boxes generally utilized as a part of continuous tasks to expand the client intelligence with site.Now in this post we going to take a gander at how it is actualized in Angular js.
For example see below given  google auto complete search box in in image:-




Step 1: Create New Project in Visual studio 2015.

Go to File => New => Project => ASP.NET  Web Application  => 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  sql table to 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 sql table name is(Country) to store country list that will appear in the auto suggestion list(This table contains CountryID,CountryName as columns).

Step 4: Add Entity Data Model using Entity framework.

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 on Finish.

Step 5: Add Angular reference files in MVC application.

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 in MVC application 

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 as controller

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');
    })
}]);

Step 8: Add view as cshtml page 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 = "Bikesh Srivastava UI Page";
}
<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 inside index.cshtml page.
4.After running the application we will get...
auto implement textbox using angular in mvc5
You have just read an article that categorized by title AngularJs / MVC by title Part 25::How to make textbox as autocomplete using angularjs in MVC 5 without jquery ?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.in/2016/07/part-25how-to-implement-auto-complete.html. Thank You!
Author: Bikesh Srivastava - Monday, 4 July 2016

5 comments to "Part 25::How to make textbox as autocomplete using angularjs in MVC 5 without jquery ?"

  1. asp-dotnet-mvc-tutorials.blogspot.com

    ReplyDelete
  2. can u pass me More data on asp.net MVC @ pandya.manav@gmail.com
    Thanks Man

    ReplyDelete
  3. selected object is working for the first time and not working for second time. Then again i need to refresh the screen. could you please help in resolving the refresh issue.

    ReplyDelete
    Replies
    1. NO i think <this problem may be you browser cashe,use ctrl+f5 or ctrl+R

      Delete

Life Is Complicated, But Now programmer Can Keep It Simple.