Autocomplete textbox using Angularjs in asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Autocomplete textbox using Angularjs in asp.net MVC

In this article I am going to explain how to create autocomplete textbox using angularjs in asp.net mvc application.



Description:
AngularJs is popular framework to build interactive web application. I want an auto suggest textbox using aungularjs means when users type something in textbox (input), matched records will be displayed dropdown style and matched text will be highlighted.
In this AngularJs tutorial I am using angucomplete-alt Jquery. Download the Js and CSS file and add to you project.

Implementation:

To fulfill this requirement I have create a table Tb_City and insert some dummy record into it.

Model
    public partial class Tb_City
    {
        public int Id { get; set; }
        public string CityName { get; set; }
    }

Add Controller
Now add an empty controller to project. I have create Json action to get data from database.

Controller code (AngularCOntroller.cs):-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
    public class AngularController : Controller
    {
        //
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Getcity()
        {
            var city = db.Tb_City.ToList();
            return Json(city, JsonRequestBehavior.AllowGet);
           
        }

    }
}

Add View
After that add a view for for Index action. Add the below given CSS and Js to view.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<link href="~/css/angucomplete-alt.css" rel="stylesheet" />
<script>
    var app = angular.module('mvcapp', ['angucomplete-alt']);
    app.controller('AngularController', ['$scope', '$http', function ($cityscope, $http) {       
        $http({
            method: 'GET',
            url: '/angular/Getcity'
        }).then(function (city) {

            $cityscope.cities = city.data;
        }, function () {
            alert('something went wrong!!!');
        })
    }]);
</script>
<style>
    .txtauctocmplete {
        float: right;
    }
    input {
        width: 230px;
        height: 27px;
        border: 2px solid #00BCD4;
        padding: 4px;
    }
</style>


Complete Code of View (index.cshtml) :-
@{
    ViewBag.Title = "MVC-AngualarJs Tutorial";
}
<h2>MVC-AngualarJs Tutorial : Autocomplete  </h2>
<fieldset style="width:25%">
    <legend>MVC-AngualarJs Tutorial : Autocomplete</legend>
    <div ng-app="mvcapp" ng-controller=AngularController>      
      Search City : <div class="txtautocomplete" angucomplete-alt id="autocomplete" placeholder="Search City" pause="100" local-data="cities" search-fields="CityName"
     title-field="CityName" minlength="1" input-class="form-control form-control-small" match-class="highlight" override-suggestions="true" clear-selected="true">
</div>  <input />
    </div>
</fieldset>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<link href="~/css/angucomplete-alt.css" rel="stylesheet" />
<script>
    var app = angular.module('mvcapp', ['angucomplete-alt']);
    app.controller('AngularController', ['$scope', '$http', function ($cityscope, $http) {       
        $http({
            method: 'GET',
            url: '/angular/Getcity'
        }).then(function (city) {
            $cityscope.cities = city.data;
        }, function () {
            alert('something went wrong!!!');
        })
    }]);
</script>
<style>
    .txtauctocmplete {
        float: right;
    }
    input {
        width: 230px;
        height: 27px;
        border: 2px solid #00BCD4;
        padding: 4px;
    }
</style>

 Save and build the project. Run the project to text it. Hope this article helps you.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon