Auto Complete TextBox Using jQuery and ASP.NET MVC

Here we will see how to use JQuery autocomplete functionality in ASP.NET MVC. Application is going to have two entities [employee and department]. On typing names of employee in text box a auto-generated list of names starting with the search text would appear and on clicking any of the name from list the corresponding department and employee name will be shown on page.

Following are the steps to be followed:

Step 1) Create a new project [ASP.NET MVC4 Web Application] and provide the appropriate name [Ex AutoCompleteMVC]. Choose MVC empty application option and click on OK.

Step 2) Create Model Classes

Go to Model folder and right click to add class [Employee.cs] and [Department.cs].

[Employee.cs]

 public class Employee  
 {  
    public int Empid { get; set; }  
    public string Name { get; set; }          
    public int Deptid { get; set; }  
 }  

[Department.cs]

 public class Department  
 {  
    public int Deptid { get; set; }      
    public string Name { get; set; }  
 }  

Step 3) Create a data repository which will have a static list of employees and corresponding departments. [DataLibrary.cs]

 public static class DataLibrary  
 {  
   public static List<Employee> employees  
   {  
     get  
     {  
        return new List<Employee>{  
                      new Employee{Empid=1,Name="Aakash",Deptid=1},  
                      new Employee{Empid=2,Name="Ashwin",Deptid=1},  
                      new Employee{Empid=3,Name="Jorge",Deptid=1},  
                      new Employee{Empid=4,Name="Dilip",Deptid=6},  
                      new Employee{Empid=5,Name="Bihal",Deptid=5},  
                      new Employee{Empid=6,Name="Suresh",Deptid=4},  
                      new Employee{Empid=7,Name="Taylor",Deptid=2},  
                      new Employee{Empid=8,Name="Sedan",Deptid=3},  
                      new Employee{Empid=9,Name="Reena",Deptid=2},  
                      new Employee{Empid=10,Name="Anthony",Deptid=1},  
                      new Employee{Empid=11,Name="Mike",Deptid=2},  
                      new Employee{Empid=12,Name="Jones",Deptid=1}  
                      };  
      }  
    }  
    public static List<Department> departments  
    {  
      get  
      {  
        return new List<Department>{  
                      new Department{Deptid=1,Name="Sales"},  
                      new Department{Deptid=2,Name="Financial"},  
                      new Department{Deptid=3,Name="Marketing"},  
                      new Department{Deptid=4,Name="HR"},  
                      new Department{Deptid=5,Name="Accounts"},  
                      new Department{Deptid=6,Name="Labour"}  
                      };  
      }  
    }  
  }