Implement Auto Complete TextBox Using AngularJS In MVC5

I have noticed in some search engines and websites that while I am typing the first two letters of a word, it shows me a suggested list to select. These auto complete text boxes are mostly used in real time projects to increase user interactivity with the site. Now in this post, we will look at how this is implemented in AngularJS.

For example, let's talk about the Google auto complete search box.

Here, the suggested results will come based on the previous search results or most searched results.

Implementing Auto Complete Textbox in Angular

To implement an auto complete text box in Angular, we need a angucomplete-alt directive. Angucomplete dependency should be added to the Angular Application. In this application, I am getting the data suggestion from the database table.

Steps to implement Auto complete text box are:

Step 1

Create New Project.

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

Step 2

Add a database to the project.

Go to Solution Explorer -> Right click App_Data folder -> Add -> New item -> Select SQL Server database under Data -> Enter Database name -> Add.

Step 3

Create a table to store the data.

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

Step 4

Add Entity Data Model.

1. Go to Solution Explorer ->Right click 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 reference files in _Layout.cshtml page, given below. (You can download the files from angucomplete-alt.css and angucomplete-alt.js.
   
   
2. Add these files in <head> tag.
   
   1. <!--Angualr refrence file for auto complete text box starts->
   2. <script src="~/Scripts/angular.min.js"></script>
   3. <script src = "~/Scripts/angular-route.min.js" > < /script>
   4. <script src = "~/Scripts/angucomplete-alt.js" > < /script>
   5. <link href = "~/Content/angucomplete-alt.css" rel = "stylesheet" / >
   6. <script src = "~/Scripts/app.js" > < /script>
   7. <!--Angualr refrence file for auto complete text box starts->

Step 6

Add Controller.

1. Add Controller by right clicking on Controllers folder -> Add -> Controller ->name it as Home Controller.
   
   
2. Replace the code with the code, given below:
   
   1. using System;
   2. using System.Collections.Generic;
   3. using System.Linq;
   4. using System.Web;
   5. using System.Web.Mvc;
   6. namespace AngularAutoCompleteTextbox.Controllers
   7. {
   8. public class HomeController: Controller
   9. {
   10. public ActionResult Index()
   11. {
   12. return View();
   13. }
   14. public ActionResult getAllCountries()
   15. {
   16. using(DatabaseEntities db = new DatabaseEntities())
   17. {
   18. var countrylist = db.Countries.OrderBy(a => a.CountryName)
   19. .ToList();
   20. return new JsonResult
   21. {
   22. Data = countrylist, JsonRequestBehavior = JsonRequestBehavior.AllowGet
   23. };
   24. }
   25. }
   26. }
   27. }
3. Index action is used to render the view.
   
   
4. getAllCountries method gets the data from the database and sends it to the Angular Controller in JSON format.