JQuery Autocomplete для электронной почты

Question

I Пытаюсь сделать автозаполнение в текстовом поле, которое будет содержать все имя пользователя получателя. Имя пользователя делится точкой с запятой «;» и идентификатор для текстового поля «givenId».

Ниже мой дизайн текстового поля:

Вот мой JQuery:

$(function() { 
    $("#givenId").autocomplete({ 
     source: '@Url.Action("MVCfunction")', 
    }); 
}); 

Моя проблема сейчас:

1) Я выбрал "Ясон" на первом месте.

2) Затем, когда я пытался выбрать второй пользователь:

3) Он пришел на смену Джейсона Kristy.

Мой вопрос: как я могу добавить в текстовое поле вместо замены пользователя после выбора нового пользователя?

Мой ожидаемый результат:

EDIT ON 23/1/2015 *

* Найдено решение, основанное на демо дается @Stephen Muecke, проверьте ответ ниже. :)

Answer 1

Вот решение, которое я нашел на основе демонстрации, предоставленной @Stephen Muecke.

Этот ответ используется для автозаполнения MVC с несколькими значениями.

1) Сохраните этот код в скрипте.

$(function() { 
     $("#givenId").autocomplete({ 
      source: '@Url.Action("MVCfunction")', 
     }); 
    }); 

2) и добавить этот код ниже:

[Примечание: этот код извлекается из http://jqueryui.com/autocomplete/#multiple ]

function split(val) { 
     return val.split(/;\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 


    $("#givenId") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function (event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).autocomplete("instance").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      minLength: 0, 
      source: function (request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function (event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(";"); 
       return false; 
      } 
     }); 
});