Comma Separated AutoComplete TextBox In ASP.NET MVC

Many times, we need to add comma separated values in a text box from autocomplete TextBox to fulfill the particular requirement. Let's say, we have one page to send the emails. Then consider, we want to send emails to multiple recipients with cc and email Ids from coming from database using autocomplete TextBox. In this type of scenario, we need a comma separated autocomplete TextBox .Let's start implementing this scenario by creating one simple ASP.NET MVC application, step by step .

1. Go to "Start" --> "All Programs" --> select "Microsoft Visual Studio 2015".
   
   
2. Go to "File" --> "New" --> click "Project" --> select "ASP.NET Web Application Template". Then, provide the project a name as you wish and click OK. After clicking, the following window will appear:
   
   
   

Step 2: Create Model Class

Now, let us create the model class file named EmployeeModel.cs by right clicking on "Models" folder, as in the following screenshot:

Now, the EmployeeModel.cs class file code snippet will look like this:

Step 3: Add Controller Class

Now, add the MVC 5 controller, as in the following screenshot:

After clicking on Add button, it will show the window. Specify the Controller name as Home with suffix Controller.

Note: The controller name must have a suffix as 'Controller'.

Now, modify the default code in HomeController.cs class file and create two action methods, after modifying the code it will look like the following:

HomeController.cs

In the preceding code, instead of going to database for records, we are creating the generic list from model class and we will fetch records from above generic list. We can get the same records from database as well.

Step 4: Add Reference of jQuery UI CSS and JS library

There are many ways to add the reference of jQuery library into our project. The following are some methods:

1. Using NuGet package manager, you can install library and reference into the project.
2. Use CDN library provided by Microsoft, jQuery, Google or any other which requires active internet connection.
3. Download jQuery files from jQuery official website and reference into the project.

In the preceding procedure of adding references of libraries into the project, 1 & 3 steps don't require the active internet connection but if you are following the second step, it requires active internet connection to load the CDN library's references into the project .

In this example, I have followed the third step to add the jQuery UI libraries references. Now, open the Layout.cshtml page to add the references. The Layout.cshtml page's header section will be look like:

Step 5: Create jQuery Ajax function.

To call controller JSON action method and invoke autocomplete function including for comma separated search text, write the following jQuery function .

Note: To work preceding function, don't forget to add the reference of the following jQuery UI libraries into the project by CDN or by downloading.

Step 6: Create View

Now, let's create Strongly Typed View named EmployeeDetails from EmployeeModel class.

After adding the necessary code, files, and logic, the EmployeeDetails .cshtml will look like the following:

Now, run the application. Type any word and it will auto populate the records which exactly starts with the first word, as in the following screenshot:

Now, after selecting the particular records, it is added into TextBox with comma. Now, type another initial letter and it will popup the list of records.

Now, add multiple records with commas. The TextBox will look like as follows.

From all preceding examples and explanations, I hope you learned how to create the comma separated auto complete TextBox using jQuery UI in ASP.NET MVC.

Note