Jquery autocomplete Token Input in MVC 4 Razor View

 HTML in View:

 @Html.EditorFor(model => model.Provider.SupervisingProviders)
 

JavaScript Section in View :

<script type="text/javascript"> 

 $(document).ready(function () { 

       $("#Provider_SupervisingProviders").tokenInput("@Url.Action("GetProviders","Provider")", {
            theme: "facebook",
            tokenLimit: 4,
            preventDuplicates: true,
            hintText: "Type in provider Name",
            queryParam: "ProviderName" 

            // needs to place this conduction in edit mode (i.e) wants to display data on page load

             @if (Model.Provider.Id > 0 && !string.IsNullOrWhiteSpace(Model.SupervisingProvidersData) )
            {
               @: ,prePopulate:  @Html.Raw(HttpUtility.HtmlDecode(Model.SupervisingProvidersData))
            }
            
      });

  }); 

</script> 

Controller :

This Method is called by Token Input for get values

[HttpGet]
public JsonResult GetProviders(string ProviderName)
{
   var providers = _masterServiceClient.GetProviders().Where(a => a.FirstName.ToUpper().Contains(ProviderName.ToUpper()) || a.LastName.ToUpper().Contains(ProviderName.ToUpper())).ToList();
 
   IEnumerable providerList = providers.Select(results => new { id = results.Id, name = results.FirstName + " " + results.LastName });
 
   return Json(providerList, JsonRequestBehavior.AllowGet);
 
}

In Add Form If we dont want any values to be selected by default, so we need to retun empty 

string

if (model.SupervisingProvidersData != null)
{
    model.SupervisingProvidersData = System.Web.Helpers.Json.Encode(model.SupervisingProvidersData);
}

Saving Selected Values in Add Form :

The Selected Attributes is saved in the text box Provider_SupervisingProviders in comma separated

format  like '2,5,6' and we can save these values directly into the database.

Displaying Saved Values in Edit Form:

 

string selectedSupervisingProviders= model.Provider.SupervisingProviders;
 
                /// get the selected Supervising Providers
if (!string.IsNullOrWhiteSpace(selectedSupervisingProviders))
{
    IEnumerable<int> SupervisingProvider = selectedSupervisingProviders.Split(',').Select(SupervisingProviders => int.Parse(SupervisingProviders));
    var provide = providers.Where(rec => SupervisingProvider.Contains(rec.Id));
    IEnumerable providerList = provide.Select(results => new { id = results.Id, name = results.FirstName + " " + results.LastName });
    model.SupervisingProvidersData = System.Web.Helpers.Json.Encode(providerList);
}

Download the Token Input form the location:

http://loopj.com/jquery-tokeninput/