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.

In the previous article I have explained how to fill dropdownlist using AngularJsin MVC, how to populate dropdownlist based on another dropdownlist usingAngularJs in MVC and how to populate the dropdownlist using AngularJs inasp.net MVC.

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.

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>

<legend>MVC-AngualarJs Tutorial : Autocomplete</legend>

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>